CSS半透明边框效果
生活随笔
收集整理的這篇文章主要介紹了
CSS半透明边框效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
源代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <style> div{width:500px;height:309px;border:50px solid hsla(0,0%,100%,0.5);background:url(file:///C:/Users/Administrator/Desktop/timg11111.jpg) -50px -50px no-repeat;}</style> </head> <body> <div></div> </body> </html> 1、HSL顏色模式不太理解。 2、background-clip屬性。 background-clip:border-box; 以border外邊緣為邊界剪除背景，背景范圍為border、padding、content。 background-clip:padding-box; 以padding外邊緣為邊界剪除背景，背景范圍為padding、content。 background-clip:content-box; 以content外邊緣為邊界剪除背景，背景范圍為content。 background-clip屬性實例代碼： <!doctype html> <html> <head> <meta charset="utf-8"> <style> body{background:black;}div{width:200px;height:200px;padding:0 50px;border:10px solid hsla(0,0%,100%,.5);background:red;} .class-padding-box{background-clip:padding-box;}.class-border-box{background-clip:border-box;} .class-content-box{background-clip:content-box; } </style></head> <body> <div class='class-padding-box'></div> <div class='class-border-box'></div> <div class='class-content-box'></div> </body> </html>
總結
以上是生活随笔為你收集整理的CSS半透明边框效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于软件工程的Qt播放器探索(一) 概述
- 下一篇： CSS 基本样式