文章目錄

• • :-: border-radius (圓角)
  • :-: box-shadow (陰影)
  • :-: 動圖 - Demo
  • :-: border-image 邊框背景
  • :-: background 背景系列

:-: border-radius (圓角)

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 (陰影)

/* 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;

:-: 動圖 - Demo

.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 邊框背景

/* 引入圖片進行填充 */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 背景系列

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-cornerclosest-sidefarthest-cornerfarthest-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; }

總結

以上是生活随笔為你收集整理的CSS边界样式 (背景、边框)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。