1.box-shadow 屬性為框添加一個或多個陰影。
語法: box-shadow: h-shadow v-shadow blur spread color inset
h-shadow 必須,水平陰影的位置,允許負值。
v-shadow 必須,垂直陰影的位置,允許負值。
blur 可選 模糊距離。
spread 可選,陰影的尺寸。
color 可選,陰影的顏色。
inset 可選,將外部陰影(outset) 改為內容步陰影。
範例:
background: yellow; box-shadow: 4px 4px 3px #000 inset;}
結果:如圖
2.border-radius
元素添加圓角邊框。
語法:border-radius: 1-4 length | % / 1-4 length | %;:四個值的順序為右下角,右上角,右上角,右上角,左下角。 border-radius: 2em 1em 4em / 0.5em 3em; 〜 border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; - - -bbot-Hbot-6-6-6-Tbot-Tbot-Tbot-Tbot-Tbot-Hbot-6-Tbot-THbot-Hbot-Hbot-6-Tbot-Hbot-Hbot-Hbot-6-B-Tbot-Hbot-色-Hbot-Hbot-Hbot-Hbot-f-色-Tbot-Hbot-色” 。
範例:(平鋪round)
『 .border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 repeat;}
分為linear-gradient(線性漸變) 和radial-gradient (徑向漸變)
linear-gradientc,c找到〜〜。、、-grada)d 00); 參數: 共三個參數 第一個參數表示為線性漸變的方向,top是從上往下, left 是從左到右如果定義成left top,那就是從左上角到右下角。 第二個和第三個參數分別是起點顏色和終點顏色。 範例:
語法:radial-
background:-webkit-radial-gradient🎀 background:-webkit-radial-gradient🀀 red, yellow, green);}
『]>結果
結果:如圖
範例: 不同尺寸大小關鍵字的使用。
範例: 範例> .gradient{width:300px; height: 180px;
kit 》、 腳、 腳 ] gradient(red, yellow 10%, green 15%);} ient 15%);}
styleHy]style
green 101, , 20px); transition:3s;} .wrap:hover .box{ margin-
left:-100px;; ="wrap">
background-repeat: -repeat background-repeat: -repeat]ground-position:left; style>
結果:如圖 6.background-clip
規定背景的繪製區域
值: border-box 〠 被裁減到邊框盒內被裁剪到邊框盒中框
content-box 背景被裁切到內容框
no-clip:從border區域向外裁切背景。
範例:
結果:如圖
〜〠 〜〠〟網!