**章節導航：** [TOC] ***** > ## :-: border-radius (圓角) ```css border-radius: 50%; /* 一個角可以設置兩個弧度，垂直/水平 */ border-top-left-radius: 10px 10px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 30px 30px; border-bottom-right-radius: 40px 40px; /* 簡寫形式，水平方向的 top-left top-right bootom-right bootom-left / 對應垂直方向的邊角 */ border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; ``` > ## :-: box-shadow (陰影) ```css /* transparent 透明色 */ background-color: transparent; /* 寫inset表示內陰影、不寫inset就是外陰影 */ /* inset -- 寫inset表示內陰影、不寫inset就是外陰影、 參數1：水平偏移量、1px 參數2：垂直偏移量、2px 參數3：陰影(高斯模糊)程度、3px (基于邊框兩邊的位置，同時向兩側展開模糊) 參數4：水平豎直范圍擴大 、0px */ box-shadow: inset 1px 2px 3px 0px #000; /* 同時設置內外陰影， */ box-shadow: 1px 2px 3px 0px #000, inset 1px 2px 3px 0px #fff; /* 或者獨立設置多個值、 */ box-shadow: inset 0px 0px 10px #fff, 3px 0px 10px #f0f, 0px -3px 10px #0ff, -3px 0px 10px #00f, 0px 3px 10px #ff0; ``` > ## :-: <a href="http://a-1.vip/demo/transition/demo.html">動圖 - Demo</a> ```css .demo { /* border: 1px solid red; */ position: absolute; border-radius: 5px; left: calc(50% - 50px); top: calc(50% - 50px); width: 100px; height: 100px; background-color: #fff; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5); /* 狀態被改變的動圖效果 */ transition: all 2.6s; opacity: 0; } .demo::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 5px; box-shadow: 0px 5px 30px rgba(0, 0, 0, 6); opacity: 0; transition: all 1.6s; } .demo:hover { /* 整體放大的倍數 */ transform: scale(3.65, 3.65); opacity: 1; } .demo::after:hover { opacity: 1; } ``` > ## :-: border-image 邊框背景 ```css /* 引入圖片進行填充 */ border-image-source: url('./src/image.png'); /* 設置漸變色進行填充 */ border-image-source: linear-gradient(red, #ccc); /* 截取：1~4個參數、區域分割 單位：可以填%，但不能帶px，上\右\下\左 */ border-image-slice: 100; /* 不加fill只填充邊框部分，加了fill 就會填充整個背景 */ border-image-slice: 10 20 30 40 fill; /* 向外延伸的程度，不常用 */ border-image-outset: 100px; border-image-width: 50px; /* 重復 */ border-image-repeat: repeat; ``` > ## :-: background 背景系列 ```css div.box123 { width: 500px; height: 500px; position: absolute; /* 水平劇中 */ left: calc(50% - 250px); /* 垂直劇中 */ top: calc(50% - 250px); background-color: red; /* 引入圖片背景 （可以引入多個圖片） */ background-image: url(), url(); /* 分別設置兩張圖片的大小 */ background-size: 100px 100px, 200px 200px; /* 不重復 */ background-repeat: no-repeat; /* 分別設置位置 */ background-position: 0 0, 100px 0; background-image: radial-gradient(#fff, #000); /* 漸變顏色生成器 linear-gradient()、radial-gradient() */ /* */ border: 20px solid transparent; padding: 20px; background-image: url('./img.png'); /* 規定背景從盒子的某個部分 開始 渲染(padding-box、border-box、content-box、text) 默認值是padding-box */ background-origin: content-box; /* 規定背景從盒子的某個部分 結束 渲染(padding-box、border-box、content-box、text) 默認值是border-box text就是用文字體的內容區域來渲染 類似于彩色字體 */ background-clip: content-box; /* background-repeat可以設置圖片的排班方式、可以填兩個參數、效果：是否重復、拉伸、間隙、補齊 */ background-repeat: space round; /* background-position定位是基于background-origin的屬性值 */ background-position: 0px 0px; /* 超出部分滾動條展示 */ overflow: scroll; /* background-attachment 設置相對于盒子的某個區域進行定位 默認值scroll(相對于容器定位) */ /* local -- 相對于內容定位(滾動條位置改變時，背景圖緊貼著文本內容) */ /* fixed -- 可以使背景在瀏覽器窗口可視區，位置保持懸浮 */ background-attachment: local; /* background-size 設置背景圖的大小 */ /* contain -- 在不改變圖片比例的情況下、讓背景圖跟容器剛好容納(100%)。有一條邊會朝內留空 */ /* cover -- 在不改變圖片比例的情況下、讓背景圖跟容器剛好容納(100%)。有一條邊會朝外溢出(推薦) */ /* 100% -- 拉伸背景圖跟容器大小一致、會改變圖像比例 */ background-size: cover; /* 漸變顏色生成器 linear-gradient()、radial-gradient() */ /* 線性漸變 linear-gradient() */ /* 參數1可空：需要漸變的方向、默認 to bottom (向右下漸變：to right bottom ) */ /* 參數1還可以寫角度：如90deg、0deg、180deg、135deg */ /* 參數2以后：漸變顏色color 20px是該顏色的起至位置 */ background-color: linear-gradient(to left, #f40 20px, #626); /* 徑向漸變 radial-gradient() */ /* 參數1可空：設置漸變的圓及圓心點、(圓形 點在左上：circle at left top) closest-corner closest-side farthest-corner farthest-side */ /* 參數2以后：漸變顏色color 20%是該顏色起至大小 */ background-color: radial-gradient(ellipse at 5px 5px, #000 20%, #fff 40px, red); } /* ----------------------------------------- Demo ----------------------------------------- */ div.box { width: 600px; height: 100px; line-height: 100px; position: absolute; left: calc(50% - 300px); top: calc(50% - 50px); font-size: 60px; font-weight: 800; /* */ background-image: url('./src/image.jpg'), url('./src/image.jpg'); background-position: center center, 0 0; /* chrome特有屬性、制作背景字體 */ -webkit-background-clip: text, padding-box; -webkit-text-fill-color: transparent; transition: all 2.3s; } div.box:hover { background-position: 0 0, center center; } ```