角的設計風格越來越流行,這也要求了前端開發人員,必須要掌握圓角屬性。
蘋果電腦系統也更新為圓角元素
Css提供了一個圓角屬性,可以很方便實現圓角,而且還可以任意設置圓角的度數,以達到設置任意弧度的圓角,甚至讓本元素變成圓球;如果還能靈活運用,什么樣的形狀都能做出來。這個圓角屬性學問不少。
border-radius:數值;
數值常用px作為單位,值越大,那么圓角就越圓。
這個數值有三種設置方法
(1)僅設置一個值
應該是我們最常用的一種情況了,常用來給button加圓角邊框,或者畫一個圓形按鈕,僅需設置一個數值,即可給元素的四個邊角設置統一的圓角弧度。
一個值,四個角同時起作用
(2)設置四個方向的值
這里要注意四個數值的書寫順序,border-radius采用的是左上角、右上角、右下角、左下角的順序
分別設置4個值
(3)對稱值
采用對角線相等的原則,左上角和右下角,右上角和左下角是一對。
設置兩個值,按對稱生效
現在基本上設計稿都是圓角類型,有些矩形的角是圓角,有些矩形是半圓型,有些干脆是整個都是圓。其實都是稍微改變一下圓角弧度。
設計稿,也是隨處可見圓角
以下做個參考,基本實際開發都是這些。
圓角矩形
半圓矩形
直接一個圓
當然還有很多奇形怪狀,也都是僅僅改變每個角的圓角弧度。
奇形怪狀
奇形怪狀
奇形怪狀
奇形怪狀
奇形怪狀
總結
語法
box-shadow:h-shadow v-shadow blur spread color inset;
屬性值 | 特點 |
h-shadow | 必需,水平陰影位置,可負 |
v-shadow | 必需,垂直陰影位置,可負 |
blur | 可選,模糊距離(虛實) |
spread | 可選,陰影尺寸(大小) |
color | 可選,陰影顏色rgba(0,0,0,.3) |
inset | 可選,將外部陰影(outset)改為內部陰影 |
語法
text-shadow:h-shadow v-shadow blur color;
語法
border-radius:length;
說明:background-size 規定背景圖像的尺寸 屬性值
length (10px) 規定背景圖的大小。第一個值寬度,第二個值高度。(直接定義背景圖的大小) Percentage(%) 以百分比為值設置背景圖大小(參照元素的大小) cover 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域 contain 把圖像圖像擴展至最大尺寸,以使其寬度或高度完全適應內容區域。
復合式寫法:background: url(img/laoli.jpg) no-repeat 0 0/cover;說明:backgroun-size和background-position要用 “ / ” 組成一個屬性值一起寫;
說明:指定background-origin屬性應該是相對位置 屬性值 padding-box 背景圖像填充框的相對位置 (從padding區開始顯示背景圖)默認值 border-box 背景圖像邊界框的相對位置(從邊框區開始顯示背景圖) content-box 背景圖像的相對位置的內容框 (從內容區開始顯示背景圖)
說明:background-clip 屬性規定背景的繪制區域。 屬性值 border-box 背景被裁剪到邊框盒。 默認值 padding-box 背景被裁剪到內邊距框。 content-box 背景被裁剪到內容框。 擴展:text: 背景被裁剪到文字。說明:-webkit-background-clip: text; 使用時要加瀏覽器前綴
語法: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;
filter : blur(value) 說明:值越大,越模糊;
border-image 屬性是一個簡寫屬性,用于設置以下屬性: border-image-source 用在邊框的圖片的路徑。 border-image-slice 圖片邊框向內偏移(不加單位)。 border-image-repeat 圖像邊框是否應平鋪(repeat)、鋪滿(round)或拉伸(stretch) border-image-outset 邊框圖像區域超出邊框的量(值是一個倍數或者具體的數值)
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:左下
說明:width:calc(100% - 200px); width:calc(100% - 200px);
注:運算符前后必須要留空格; + - * / 加法和減法直接寫數值就好; 乘法和除法 要寫倍數 不用加單位 ;
pointer-events:none;
*請認真填寫需求信息,我們會在24小時內與您取得聯系。