css3 UI 修飾－回顧

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-色” 。

　　　　　　　　
　　　　　　　　

　　　　　　〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〟〜〜〜〜〜〟
3.border-image


　　元素邊框背景
　　用於設定屬性：
　　　　border-image-source  〠用在邊框的圖片『　　　　border-image-width 圖片邊框的寬度
　　　　border-image-outset 邊框圖像區域超出邊框的量
　　　　border-image-repeat   圖像邊框是否平鋪（repeated）
　　　　　　　　鋪滿（rounded ）或者拉伸（stretched）默認。
　　　　邊框將border-image 分成了9部分: border-top-image,border-right-image
　　　　　　border-bottom-image , border-left　　　　border-bottom-image [ -right-image , border-bottom-left-image,
　　　　　　border-bottom-right-image   位於四個正方向的沒有展示效果，不會平鋪...
　　例：　　　.border_image{width:400px; height :100px;border:1em double orange;border-image:url(1.png) 27;}
　　　　
　　　　

　　範例：（平鋪round）
　　　　

　　結果：如圖

　　　　

　　

『　　　　.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 repeat;}

　　　　
　　　　

　　『
4.
gradient漸變

　　分為linear-gradient(線性漸變) 和radial-gradient (徑向漸變)

　　　　linear-gradientc,c找到〜〜。、、-grada)d 00);　　　　　　　　參數: 共三個參數 第一個參數表示為線性漸變的方向，top是從上往下，　　　　　　　　　　　　left 是從左到右如果定義成left top，那就是從左上角到右下角。 　　　　　　　　　　　　第二個和第三個參數分別是起點顏色和終點顏色。 　　　　　　　　範例：

　　　　　　　　　　
　　　　　　　　

　　　　　　　　結果：如圖

　　　　　　　　　　


　　　　radial-gradient 徑向漸變。 　　　　　　漸變的形狀是ellipse(表示橢圓形) farthest-cormer(表示到最遠的角落)

　　　　　　語法：radial-　　　　　　　

　　　　　　　　　　　　　　background:-webkit-radial-gradient🎀　　　background:-webkit-radial-gradient🀀　　　　　　　　　　　　　　　　red, yellow, green);}

　　　　　　　　
　　　　　　　　

　　　　　

　　　　『

]>結果
　　　　　　　　


　　　　　　範例：ellipse橢圓
　　　　　　　　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　腳　　　　　　　　　　　　　　ellipse, red, yellow, green);}　　　　　　　　　　　　　　　　　　

　　　　　　　　　　

　　　　　　結果：如圖

　　　　　　　　

　　　　　　範例： 不同尺寸大小關鍵字的使用。
　　　　　　　　
　　　　　　　　

　　　　　　結果：如圖🎀『〜　〜　『　〜〜　〜　〜　〜〜　〜　〜　〜〜　〜　〜　〜〜　　　　重複的徑向漸變　　　　　　repeating-radial-gradient() 函數用於重複徑向漸變

　　　　範例： 　　　　　　範例>     　　　　　　　　.gradient{width:300px; height: 180px;

　　　　kit　　》、　腳、　腳　]　　　　　　　　　　　　gradient(red, yellow 10%, green 15%);}

　　　　　ient 15%);}
　　　　　　styleHy]style

　　　　結果：如圖

　　　　　　


　　　　進度*　　　　.wrap{width:300px;height:25px;
　　　　　　　　　　　　　　　　　　　　　　　　solid #000;}
    　　　　　　　　.box{width:400px;height:30px;　　　　　　行　　　　『　　　　　　　　　linear- gradient(15deg,green 0,

　　　　　　　　　　　　　　　　　　　　　　green 101,　　,　　　　　　　20px); transition:3s;} .wrap:hover .box{ margin-

　　　　　　　　　　　　　　left:-100px;; ="wrap">

    　　　　　　　　

　　　　　　
　　　　　　 ：如圖

　　　　　　


5

.background-origin


　　福　content-box;
　　　　　　　　padding -box 背景影像相對於內邊距框來定位。
　　　　　　　　border-box   背景影像嫌貴對於
　　　　　　　『content-box 背景影像相對應來定位style>
   　　　　　　　　.background_origin{width: 300px;height: 150px;border:1px solid black;padding:35px; background-image:url('1.png');      :url('1.png');

       　　　　　　　　　　　　background-repeat:　-repeat　　　　　background-repeat:　-repeat]ground-position:left; style>　　　　　　

　　　　結果：如圖

　　　　　　

6.background-clip
　　規定背景的繪製區域
　　　　值： border-box      〠 被裁減到邊框盒內被裁剪到邊框盒中框
　　　　　　content-box  背景被裁切到內容框
　　　　　　no-clip：從border區域向外裁切背景。
　　　　範例：
　　　　　　

　　　　結果：如圖

　　　〜〠　〜〠〟網！