99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

css3中，可利用border-radius屬性實(shí)現(xiàn)圓角，語法“border-radius:圓角半徑值;”；可利用box-shadow屬性實(shí)現(xiàn)陰影，語法“box-shadow:X軸偏移量 Y軸偏移量 模糊半徑 擴(kuò)展半徑 顏色 投影方式;”。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供鎮(zhèn)賚網(wǎng)站建設(shè)、鎮(zhèn)賚做網(wǎng)站、鎮(zhèn)賚網(wǎng)站設(shè)計、鎮(zhèn)賚網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鎮(zhèn)賚企業(yè)網(wǎng)站模板建站服務(wù)，十多年鎮(zhèn)賚做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

邊框的圓角--border-radius

圓角的方塊：

border-radius:10px; /* 所有角都使用半徑為10px的圓角 */

效果：

實(shí)心上半圓：

方法：把高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的半徑與元素的高度一致（也可以大于高度）。

#box{ width:80px; height:40px;/*寬度的一半*/ background:skyblue; border-radius:40px 40px 0 0;/*4個值分別代表上、右、下、左*/}

效果：

實(shí)心圓：

方法：把寬度（width）與高度(height)值設(shè)置為一致（也就是正方形），并且四個圓角值都設(shè)置為它們值的一半。

#box{ width:80px; height:80px; background:skyblue; border-radius:40px;}

效果：

實(shí)心左半圓形：

方法：元素寬度為高度的一半，把左上角和左下角設(shè)為高度的一半。

#box{ width:40px; height:80px; background:skyblue; border-radius:40px 0 0 40px;}

效果：

邊框陰影---box-shadow

box-shadow可以為元素添加陰影，支持添加一個或者多個。

box-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色 投影方式;

參數(shù)：

注意：inset 可以寫在參數(shù)的第一個或最后一個，其它位置是無效的。

陰影模糊半徑：

此參數(shù)可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。

css代碼：

#box{ width:50px; height:50px; background:#fff; box-shadow:4px 4px 15px #666; }

效果：

陰影擴(kuò)展半徑：

此參數(shù)可選，值可以是正負(fù)值，如果值為正數(shù)，整個陰影都延展擴(kuò)大，反之值為負(fù)值時，則縮小。

css代碼：

#box{ width:50px; height:50px; background:#fff; box-shadow:4px 4px 15px -3px #666;}

效果：

X軸偏移量和Y軸偏移量值可以設(shè)置為負(fù)數(shù)

X軸偏移量為負(fù)數(shù)：

#box{ width:50px; height:50px; background:#fff; box-shadow:-5px 5px 5px #666;}

效果：

Y軸偏移量為負(fù)數(shù)：

#box{ width:50px; height:50px; background:#fff; box-shadow:5px -5px 5px #666;}

效果：

外陰影：

#box{ width:50px; height:50px; background:green; box-shadow:5px 4px 10px #666;}

效果：

內(nèi)陰影：

#box{ width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px #666 inset;}

效果：

添加多個陰影：

#box{ width:50px; height:50px; background:#fff; box-shadow:5px 4px 10px #666 inset, 3px 3px 5px pink, 6px 4px 2px green;}

效果：

（學(xué)習(xí)視頻分享：css視頻教程）

本文題目：css3怎么實(shí)現(xiàn)邊框的圓角和陰影
瀏覽地址：http://www.ef60e0e.cn/article/cphsgi.html