html5如何添加漸變邊框效果

這篇文章主要介紹了html5如何添加漸變邊框效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　1、邊框與背景

　　半透明邊框

　　.demo{

　　background-color: #fff;

　　border: rgba(255, 255, 255, 0.5) 10px solid;

　　background-clip: padding-box;

　　}

　　技巧歸納：使用背景剪切屬性，將背景的顯示不包含邊框

　　background-clip：對(duì)背景進(jìn)行剪切，這個(gè)是根據(jù)css的盒模型分的：

　　border-box(背景包含到邊框)

　　padding-box(背景只包含到邊距)

　　content-box(背景只包含到內(nèi)容)

　　多重邊框

　　.demo{

　　outline: #fff 1px dashed;

　　outline-offset: -10px;

　　}

　　技巧歸納

　　outline：是繪制于元素周圍的一條線，位于邊框邊緣的外圍

　　outline-offset：設(shè)置輪廓的偏移位置

　　邊框內(nèi)圓角

　　.demo{

　　border-radius: 8px;

　　box-shadow: 0 0 0 8px #655;

　　}

　　技巧歸納：利用陰影的特性實(shí)現(xiàn)

　　box-shadow：h-shadow(水平陰影的位置) v-shadow(垂直陰影的位置) blur(模糊距離) spread(陰影的尺寸) color(陰影顏色) inset(內(nèi)部陰影)

　　條紋效果

　　.demo{

　　background: linear-gradient(to right, #fb3 50%, #58a 0);

　　background-size: 30px 100%;

　　}

　　技巧歸納：利用線性漸變的特性實(shí)現(xiàn)

　　linear-gradient：(漸變方向，起始顏色，結(jié)束為止，結(jié)束顏色，起始位置) 說實(shí)在的，這個(gè)真的需要多體驗(yàn)才能理解——

　　background-size：背景大小的設(shè)置

　　.demo{

　　background: repeating-linear-gradient(45deg, #fb3 0,#fb3 15px,#58a 15px,#58a 30px);

　　}

　　技巧歸納：利用重復(fù)線性漸變的特性實(shí)現(xiàn)，支持角度設(shè)置

　　螞蟻行軍

　　這個(gè)效果，之前用過svg實(shí)現(xiàn)過，原來css3也是可以的。這里的原理是利用多重背景實(shí)現(xiàn)的，你需要理解background的各屬性特性呀。(動(dòng)態(tài)效果請(qǐng)?jiān)L問螞蟻行軍效果)

　　.demo {

　　width: 200px;

　　height: 100px;

　　padding: 20px;

　　border: 1px solid transparent;

　　background-image:

　　linear-gradient(white,white),

　　repeating-linear-gradient(-45deg, black 0, black 25%, white 25%, white 50%);

　　background-size: 20px 20px;

　　background-clip: padding-box,border-box;

　　background-position: 0;

　　animation: ants 12s linear infinite;

　　}

　　@keyframes ants{

　　to{

　　background-position: 100%;

　　}

　　}

　　2、形狀

　　橢圓

　　自適應(yīng)的橢圓

　　.demo{

　　border-radius: 50% / 50%;

　　}

　　技巧歸納：border-radius支持2個(gè)參數(shù)，分別是橫坐標(biāo)，縱坐標(biāo)。可以是像素也可以是百分比

　　半橢圓

　　.demo{

　　border-radius: 100% 0 0 100% / 50% 0 0 50%;

　　}

　　技巧歸納：border-radius支持8個(gè)參數(shù)，分別是上左，上右，下左，下右

　　四分之一的圓

　　.demo{

　　border-radius: 0 100% 0 0;

　　}

　　三角形

　　.demo{

　　-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

　　}

　　.demo:hover{

　　-webkit-clip-path: circle(100px at 50% 50%);

　　}

　　技巧歸納：clip-path剪切路徑

　　切角

　　.demo {

　　background: linear-gradient(135deg, transparent 15px, #58a 0) top left,

　　linear-gradient(-135deg, transparent 15px, #655 0) top right,

　　linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,

　　linear-gradient(45deg, transparent 15px, #655 0) bottom left;

　　background-size: 50% 50%;

　　background-repeat: no-repeat;

　　}

　　折角

　　.demo {

　　background: linear-gradient(-135deg, transparent 15px, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 21.4px 21.4px,

　　linear-gradient(-135deg,transparent 15px, #58a 0)

　　}

　　3、投影

　　單側(cè)投影

　　.demo {

　　background-color: #fffbbb;

　　box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .5);

　　}

　　雙側(cè)投影

　　.demo {

　　box-shadow: 6px 0px 4px -4px rgba(0, 0, 0, .5),

　　-6px 0px 4px -4px rgba(0, 0, 0, .5)

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html5如何添加漸變邊框效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!