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

2021-10-10 06:07:52 字數 849 閱讀 8508

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

語法:

border-radius: length;
寫乙個矩形的盒子,然後設定border-radius: 50%即可得到圓形。

圓角矩形可以設定length屬性為高的一半

length部分引數可以為1個,2個,3個或4個,引數為乙個則修改四個角,引數為兩個則對角線相同,引數為四個則從左上開始順時針修改。

可以用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius只修改其中乙個角的引數。

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

語法:

box-shadow: h-shadow v-shadow blur spread color inset;

描述h-shadow

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

v-shadow

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

blur

可選,模糊距離。

spread

可選,陰影尺寸。

color

可選,陰影的顏色。

inset

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

可以用div:hover{}設定滑鼠經過時出現陰影。

text-shadow屬性用於為文字新增陰影。

text-shadow: h-shadow v-shadow blur color;

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

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

圓角邊框 盒子陰影

在css3中新增了圓角邊框的樣式 border radius屬性用於設定元素的外邊框圓角 語法 border radius length 原理 radius半徑原理 橢 圓與邊框交集形成圓角效果 css3中新增了盒子陰影 box shadow屬性為盒子新增陰影 語法 box shadow h sha...

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

boeder radius屬性用於設定元素的外邊框圓角。語法 border radius 20px 50 引數值可以為 數值或者百分比的形式。如果是正方形,想要設定為乙個圓,把數值修改為高度或者寬度的一半即可,或者直接寫為50 如果是個矩形,設定為高度的一半就可以做 該屬性是乙個簡寫屬性,可以跟四個...