圓角邊框 盒子陰影

2021-10-21 07:36:24 字數 589 閱讀 1675

在css3中新增了圓角邊框的樣式

border-radius屬性用於設定元素的外邊框圓角

語法:border-radius:length

原理:radius半徑原理:(橢)圓與邊框交集形成圓角效果

css3中新增了盒子陰影

box-shadow屬性為盒子新增陰影

語法:box-shadow:h-shadow v-shadow blur spread color inset

描述h-shadow

必需。水平陰影的位置,允許負值

v-shadow

必需。垂直陰影的位置,允許負值

blur

可選。模糊距離

spread

可選。陰影的尺寸

color

陰影的顏色

inset

可選。將外部陰影改為內部陰影

注意:預設的是**影outset,但是不可以寫這個單詞,否則陰影無效

盒子陰影不占用空間,不會影響其他盒子排列

圓角邊框 盒子陰影 文字陰影

border radius length 引數值可以為數值或百分比的形式 如果是正方形設定為乙個圓,把數值修改為高度或者寬度的一半即可,或者直接寫50 如果是矩形,設定為高度的一半即為圓角矩形 該屬性是乙個簡寫屬性,可以跟四個值,分別代表左上角 右上角 右下角 左下角 順時針 分開寫 border ...

圓角邊框和盒子陰影

語法 border radius lenth 其中每乙個值可以為數值或百分比的形式 技巧 讓乙個正方形變成圓圈 以上效果圖矩形的圓角,就不要用百分比了,因為百分比是表示高度和寬度的一半 而我們這裡矩形就只用高度的一般就好了。精確單位 語法 box shadow 水平陰影 垂直陰影 模糊距離 虛實 陰...

圓角邊框 盒子陰影和文字陰影

border radius屬性用於設定元素餓外邊框圓角。語法 border radius length 寫乙個矩形的盒子,然後設定border radius 50 即可得到圓形。圓角矩形可以設定length屬性為高的一半 length部分引數可以為1個,2個,3個或4個,引數為乙個則修改四個角,引數...