網(wǎng)頁元素太過正直？那就讓她變得圓滑一點！- CSS進(jìn)階教程

角的設(shè)計風(fēng)格越來越流行，這也要求了前端開發(fā)人員，必須要掌握圓角屬性。

蘋果電腦系統(tǒng)也更新為圓角元素

Css提供了一個圓角屬性，可以很方便實現(xiàn)圓角，而且還可以任意設(shè)置圓角的度數(shù)，以達(dá)到設(shè)置任意弧度的圓角，甚至讓本元素變成圓球；如果還能靈活運(yùn)用，什么樣的形狀都能做出來。這個圓角屬性學(xué)問不少。

語法

border-radius：數(shù)值；

數(shù)值常用px作為單位，值越大，那么圓角就越圓。

這個數(shù)值有三種設(shè)置方法

（1）僅設(shè)置一個值

應(yīng)該是我們最常用的一種情況了，常用來給button加圓角邊框，或者畫一個圓形按鈕，僅需設(shè)置一個數(shù)值，即可給元素的四個邊角設(shè)置統(tǒng)一的圓角弧度。

一個值，四個角同時起作用

（2）設(shè)置四個方向的值

這里要注意四個數(shù)值的書寫順序，border-radius采用的是左上角、右上角、右下角、左下角的順序

分別設(shè)置4個值

（3）對稱值

采用對角線相等的原則,左上角和右下角，右上角和左下角是一對。

設(shè)置兩個值，按對稱生效

案例

現(xiàn)在基本上設(shè)計稿都是圓角類型，有些矩形的角是圓角，有些矩形是半圓型，有些干脆是整個都是圓。其實都是稍微改變一下圓角弧度。

設(shè)計稿，也是隨處可見圓角

以下做個參考，基本實際開發(fā)都是這些。

圓角矩形

半圓矩形

直接一個圓

當(dāng)然還有很多奇形怪狀，也都是僅僅改變每個角的圓角弧度。

奇形怪狀

知識導(dǎo)圖

總結(jié)

、CSS陰影（box-shadow）

1.盒子陰影

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

屬性值	特點
h-shadow	必需，水平陰影位置，可負(fù)
v-shadow	必需，垂直陰影位置，可負(fù)
blur	可選，模糊距離（虛實）
spread	可選，陰影尺寸（大小）
color	可選，陰影顏色rgba(0,0,0,.3)
inset	可選，將外部陰影（outset）改為內(nèi)部陰影

默認(rèn)為外陰影(outset)，但是不可以寫這個單詞，否則無效
盒子陰影不占用空間，不會影響其他盒子排列
鼠標(biāo)經(jīng)過div為div:hover {box-shadow: 10px 10px;}

2.文字陰影（text-shadow）

語法
text-shadow：h-shadow v-shadow blur color；

三、圓角邊框（border-radius）

語法
border-radius：length;

半徑原理：圓與邊框的交集形成圓角效果
參數(shù)值可以為數(shù)值或百分比形式
若為正方形，想設(shè)置為圓，把數(shù)值改為高/寬的一半，或直接寫為50%
若為矩形，設(shè)為高的一半即可
該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角，右上角，右下角，左下角
分開寫：border-top-left-radius | border-top-right-radius
border-bottom-left-radius | border-bottom-right-radius

、Background-size 背景尺寸

說明：background-size 規(guī)定背景圖像的尺寸 屬性值

length (10px) 規(guī)定背景圖的大小。第一個值寬度，第二個值高度。（直接定義背景圖的大小） Percentage(%) 以百分比為值設(shè)置背景圖大小（參照元素的大小） cover 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域 contain 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度或高度完全適應(yīng)內(nèi)容區(qū)域。

復(fù)合式寫法：background: url(img/laoli.jpg) no-repeat 0 0/cover;說明：backgroun-size和background-position要用 “ / ” 組成一個屬性值一起寫；

2、background-origin 背景原點（起始點）位置

說明：指定background-origin屬性應(yīng)該是相對位置 屬性值 padding-box 背景圖像填充框的相對位置（從padding區(qū)開始顯示背景圖）默認(rèn)值 border-box 背景圖像邊界框的相對位置（從邊框區(qū)開始顯示背景圖） content-box 背景圖像的相對位置的內(nèi)容框（從內(nèi)容區(qū)開始顯示背景圖）

3、background-clip 背景裁切

說明：background-clip 屬性規(guī)定背景的繪制區(qū)域。 屬性值 border-box 背景被裁剪到邊框盒。默認(rèn)值 padding-box 背景被裁剪到內(nèi)邊距框。 content-box 背景被裁剪到內(nèi)容框。擴(kuò)展：text： 背景被裁剪到文字。說明：-webkit-background-clip: text; 使用時要加瀏覽器前綴

4、添加多張背景圖:

語法：background:url(),url();

background:url(img/corner_lt.gif) no-repeat left top, url(img/corner_rt.gif) no-repeat right top, url(img/corner_rb.gif) no-repeat right bottom, url(img/corner_lb.gif) no-repeat left bottom;

background-color:#63ceff;

5、模糊：blur

filter : blur(value) 說明：值越大，越模糊；

6、圖片邊框?qū)傩裕?/h2>
border-image 屬性是一個簡寫屬性，用于設(shè)置以下屬性: border-image-source 用在邊框的圖片的路徑。 border-image-slice 圖片邊框向內(nèi)偏移(不加單位)。 border-image-repeat 圖像邊框是否應(yīng)平鋪(repeat)、鋪滿(round)或拉伸(stretch) border-image-outset 邊框圖像區(qū)域超出邊框的量(值是一個倍數(shù)或者具體的數(shù)值)

7、CSS圓角屬性：

Border-radius：

語法：border-radius: 20px; 代表每個角的X軸的弧度和Y軸的弧度是一樣的；

語法：border-radius: 20px/50px; 代表每個角的X軸的弧度是20px,Y軸的弧度是50px；

說明：10px 20px 30px 40px/50px 40px 30px 20px; “/ ”前表示X軸的弧度；“/ ”后表示Y軸的弧度

用法： border-radius: 10px; 四個角的值都是10px; border-radius: 10px 20px; 值1：左上和右下；值2 ：右上和左下 border-radius: 10px 20px 30px ; 值1：左上；值2 ：右上和左下；值3：右下； border-radius: 10px 20px 30px 40px ; 值1：左上；值2 ：右上和；值3：右下；值 4：左下

8、css3 calc()（四則運(yùn)算）

說明：width:calc(100% - 200px); width:calc(100% - 200px);

注：運(yùn)算符前后必須要留空格； + - * / 加法和減法直接寫數(shù)值就好；乘法和除法要寫倍數(shù) 不用加單位；

9、pointer-events：阻止鼠標(biāo)事件、穿透效果

pointer-events:none;

在線咨詢

上一篇：CSS-基礎(chǔ)
下一篇：Web開發(fā)學(xué)習(xí)筆記（21）-CSS（8）字體/鏈接/列表

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商