當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3开发总结（圆角、盒阴影、边界图片）

發(fā)布時(shí)間：2023/12/9 CSS 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3开发总结（圆角、盒阴影、边界图片）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

CSS3開發(fā)總結(jié)（圓角）
12/100
發(fā)布文章
qq_41913971

CSS3

1）圓角 border-radius
2）盒陰影 box-shadow
3）邊界圖片 border-image-source

1）圓角 border-radius

border-radius屬性，復(fù)合屬性。一個(gè)最多可指定四個(gè)圓角。

語法：
boder-radius: 1-4 | height | %

多值：
一個(gè)值：四角相同
兩個(gè)值：value1（左上角與右下角） value2（右上角與左下角）
三個(gè)值：value1（左上角） value2（右上角與左下角） value3（右下角）
四個(gè)值：順時(shí)針方向，從左上-右上-右下-左下

屬性：
border-radius: 可設(shè)置四值
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-right-radius: 右下角

兼容性：
IE9+ 、 FireFox4+ 、Chrome、Safari5+ 、 Opera

2）盒陰影 box-shadow

box-shadow 屬性，可以設(shè)置一個(gè)或者多個(gè)陰影。

語法：
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平方向陰影。值可正可負(fù)，0為左右陰影，負(fù)數(shù)陰影在左邊，正數(shù)陰影在右邊
v-shadow：垂直方向陰影。值可正可負(fù)，0為上下陰影，負(fù)數(shù)陰影在上邊，正數(shù)陰影在下邊
blur：陰影模糊度，不能取負(fù)數(shù)。
spread：陰影大小。值可正可負(fù)，正數(shù)陰影擴(kuò)大（陰影大小大于盒子大小），負(fù)數(shù)陰影縮小（陰影大小小于盒子大小），0陰影與盒子同等大小。
color：陰影顏色（顏色名稱、十六進(jìn)制、rgb、 rgba）
inset：有inset 代表框內(nèi)陰影，不帶inset 代表框外陰影

1）設(shè)置單個(gè)陰影 <style type="text/css">body{padding: 30px;}.demo{width: 200px;height: 200px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 20px red;}</style><body><div class="demo"></div></body>

2）設(shè)置多個(gè)陰影：多個(gè)陰影之間用逗號(hào)（,）隔開 .demo{width: 200px;height: 200px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;}

兼容性：
IE9+、FireFox4+、Chrome、Safari5+、Opera

注意：小程序、小程序嵌套h5不支持顏色名稱、十六進(jìn)制，一定要用rgb、 rgba

3）邊界圖片 border-image-source

border-image-source 屬性，指定要使用的圖像。
屬性：
border-image-source: 指定要使用的圖像。
border-image -slice：指定圖像的邊界向內(nèi)偏移
border-image -width：指定圖像邊界的寬度
border-image-outset：指定在邊框外部繪制border-image-area 的量
border-image-repeat：該屬性用于圖像邊界是否應(yīng)重復(fù)（repeated）、拉伸（stretched）或鋪滿（rounded）

CSS3
1）圓角 border-radius
2）盒陰影 box-shadow
3）邊界圖片 border-image-source
1）圓角 border-radius
border-radius屬性，復(fù)合屬性。一個(gè)最多可指定四個(gè)圓角。

語法：
boder-radius: 1-4 | height | %

在這里插入圖片描述

在這里插入圖片描述
多值：
一個(gè)值：四角相同
兩個(gè)值：value1（左上角與右下角） value2（右上角與左下角）
三個(gè)值：value1（左上角） value2（右上角與左下角） value3（右下角）
四個(gè)值：順時(shí)針方向，從左上-右上-右下-左下

屬性：
border-radius: 可設(shè)置四值
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-right-radius: 右下角

在這里插入圖片描述
兼容性：
IE9+ 、 FireFox4+ 、Chrome、Safari5+ 、 Opera

2）盒陰影 box-shadow
box-shadow 屬性，可以設(shè)置一個(gè)或者多個(gè)陰影。

語法：
box-shadow: h-shadow v-shadow blur spread color inset;

1）設(shè)置單個(gè)陰影

在這里插入圖片描述

2）設(shè)置多個(gè)陰影：多個(gè)陰影之間用逗號(hào)（,）隔開
.demo{
width: 200px;
height: 200px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px red,
5px -5px 10px blue,
10px -10px 10px yellow,
20px -20px 10px black;
}
在這里插入圖片描述

兼容性：
IE9+、FireFox4+、Chrome、Safari5+、Opera

注意：小程序、小程序嵌套h5不支持顏色名稱、十六進(jìn)制，一定要用rgb、 rgba

3）邊界圖片 border-image-source
border-image-source 屬性，指定要使用的圖像。
屬性：
border-image-source: 指定要使用的圖像。
border-image -slice：指定圖像的邊界向內(nèi)偏移
border-image -width：指定圖像邊界的寬度
border-image-outset：指定在邊框外部繪制border-image-area 的量
border-image-repeat：該屬性用于圖像邊界是否應(yīng)重復(fù)（repeated）、拉伸（stretched）或鋪滿（rounded）

<body><div class="demo demo1">圖像平鋪（重復(fù)）</div><div class="demo demo2">圖像平鋪（重復(fù)）</div><div class="demo demo3">復(fù)合demo1</div> </body>

在這里插入圖片描述

文章目錄
Markdown 3957 字?jǐn)?shù) 215 行數(shù) 當(dāng)前行 214, 當(dāng)前列 204HTML 3411 字?jǐn)?shù) 182 段落

總結(jié)

以上是生活随笔為你收集整理的CSS3开发总结（圆角、盒阴影、边界图片）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： [一个经典的多线程同步问题]解决方案一：
下一篇： CSS3中弹性盒布局的最新版