學習CSS3的曲線陰影和翹邊陰影的寫法

2021-08-21 10:52:06 字數 735 閱讀 1649

用box-shadow

box-shadow的引數有h-shadow(水平陰影的位置)v-shadow(垂直陰影的位置)都可為負值,都為必寫的值(當v-shadow和h-shadow值為0的時候陰影就是四面都有)。blur是模糊距離,spread是陰影的尺寸,color是陰影的顏色,設定顏色時建議用rgba(0,0,0,0.9)其中最後乙個值是設的不透明度,從0到1,越接近1代表透明度越低。inset是將外部陰影(outset)改為內部陰影。如果用內陰影要在乙個box-shadow後面用逗號隔開,設定完屬性後 (空格)inset。

為div設定圓角時用border-radius,

border-radius:100px/10px表示水平方向上的半徑為100px,垂直方向上半徑為10px

還要為次投影設定z-index:-1使得這個投影在主投影的下面,設定content:'',表示插入乙個這個投影在div裡面。儘管content:''的單引號裡可以插入文字之類的但顯然我們要的不是這個而是空白的陰影(這句話前後矛盾了哈)

如果想讓陰影的顏色更深一點,一定程度上改變不透明度也行,但是也可以用陰影的重疊達到效果。

在曲線陰影的前提工作下,將次投影

做圖形的轉換,用transform,其語法為transform:none/transform-functions,引數有skew(x-angle,y-angle)定義沿著x軸和y軸的2d傾斜轉換。skewx定義沿著x軸的2d傾斜轉換,同理skewy。向左做傾斜就令為負數。用rotate表示旋轉多少度。

css3的文字陰影和換行

1.文字陰影 text shadow 陰影比文字右移的px,陰影比文字下移的px,陰影的模糊距離px,陰影的顏色 用法 h1 2.word break 段落換行方式 值 word break normal 預設,使用瀏覽器預設換行方式 word break keep all 僅在段落的半形空格或連字...

CSS3陰影 box shadow的使用和技巧總結

text shadow是給文字新增陰影效果,box shadow是給元素塊新增周邊陰影效果。隨著html5和css3的普及,這一特殊效果使用越來越普遍。基本語法是 物件選擇器 box shadow屬性的引數設定取值 陰影型別 此引數可選。如不設值,預設投影方式是外陰影 如取其唯一值 inset 其投...

CSS3陰影 box shadow的使用和技巧總結

text shadow是給文字新增陰影效果,box shadow是給元素塊新增周邊陰影效果。隨著html5和css3的普及,這一特殊效果使用越來越普遍。基本語法是 物件選擇器 box shadow屬性的引數設定取值 陰影型別 此引數可選。如不設值,預設投影方式是 影 如取其唯一值 inset 其投影...