整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前做過很多特殊的布局，比如在這兩篇文章 CSS 實現優惠券的技巧 (juejin.cn)[1]、CSS 實現支持漸變的提示框（tooltips） (juejin.cn)[2]，如下
但是一直有一個痛點就是：無法給這些圖形加上邊框
今天帶來一個小技巧：利用 drop-shadow 一行代碼搞定所有不規則邊框
這里需要利用投影 drop-shadow， 不太了解的可以參考 這篇文章: 被低估的CSS濾鏡：drop-shadow[3]，這里簡單介紹一下
語法其實很簡單
filter: drop-shadow(offset-x offset-y blur-radius color)并不是一個單獨的屬性，而是 filter 濾鏡下的一個方法
這里 offset-x、offset-y為偏移量，blur-radius為模糊半徑，color為投影顏色。實際作用就是可以模擬真實世界的投影（透明的部分不會投影），區別如下
可惜的是，雖然和 box-shadow 比較類似，但是少了擴展半徑。試想一下，如果支持了擴展半徑，那不規則邊框是不是很容易了（應該不會支持了，因為真實世界的投影也沒有擴展半徑）？
那么，drop-shadow如何生成邊框呢？
box-shadow 可以很輕易的實現多重陰影
box-shadow: 0 0 3px #333, 1px 1px 5px #666, ...可以無限疊加下去。
但是，drop-shadow可就不行了，比如
filter: drop-shadow(0 0 3px #333, 1px 1px 5px #666, ...)可以看到瀏覽器直接認為非法了
不過可以換一種思路，雖然 drop-shadow不支持，但是filter支持多種濾鏡，所以可以這樣來實現
filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333)...這樣就可以生效了
是不是有點像邊框了？如果只設置 0.5px 的模糊，多疊加幾次，模糊的部分會變清晰，這個就有點像一個比較軟的筆觸，多畫幾筆就變清晰了，于是可以得到這樣的效果
這樣就更加接近了，實踐下來，可能需要微調，這里給出一個比較完美的方案（重點來了~）
.wrap{
filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}這樣實現的邊框已經足夠清晰，基本可以日常使用了
這段代碼中顏色比較多，可以優化一下，投影的顏色默認是跟隨當前文字顏色的，所以可以簡化為
.wrap{
filter: drop-shadow(0 0 0.5px)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0);
color: #333;
}線上示例可訪問 coupon-border[4]，還有這個 tooltips-border[5]
使用方式簡單，在容器的最外層加上這一行 CSS 就行了，比如之前的優惠券例子，得到的邊框效果這樣的
還有這樣的
邊框還算不錯，幾乎看不出投影
不過這里需要注意的是，經過 mask 裁剪的圖形需要在外層嵌套一層父級，不然投影會被 mask 直接裁剪掉
<div class="wrap">
<div class="coupon">
<!--優惠券-->
</div>
</div>另外，這個方案進適合比較小的邊框，如果較大的邊框，可能會比較圓滑，而且需要疊加更多的濾鏡，效果也不太好，如下
這些就需要自行取舍了（一般情況下不會有太粗的邊框）
本文介紹了一個實現不規則邊框的通用方案，成本非常低，效果也非常不錯，這里總結一下：
1.drop-shadow只會對不透明部分生成投影，符合真實物理世界2.drop-shadow不支持多重投影，filter支持多重濾鏡，可以間接實現多重投影3.邊框的實現原理是投影的多重疊加4.有些通過mask裁剪生成的圖形，需要在外包裹一層容器，再生成邊框5.適合比較小的邊框，過大的邊框不太理想6.濾鏡其實是一個比較耗費性能的屬性，不適合太范圍使用
可能大部分同學最后可能還是會選擇 “切圖.png”，不過這也算是一個解決方案 ，多一種方案總是沒錯的。最后，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發???
[1] CSS 實現優惠券的技巧 (juejin.cn): https://juejin.cn/post/6945023989555134494
[2] CSS 實現支持漸變的提示框（tooltips） (juejin.cn): https://juejin.cn/post/6971261516284690468
[3] 這篇文章: 被低估的CSS濾鏡：drop-shadow: https://zhuanlan.zhihu.com/p/195792157
[4] coupon-border: https://codepen.io/xboxyan/pen/jOmeoPd
[5] tooltips-border: https://codepen.io/xboxyan/pen/wvdQgXK
SS3 的邊框屬性可以給創建圓角的盒子，也可以給盒子設置陰影，用圖片美化盒子。
border-radius可以給元素設置圓角。
如下，一個div元素：
<div class="box">border-radius可以給元素設置圓角。</div>
我們給它加一點樣式，并設置它的border-radius為15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
瀏覽器中查看效果：
border-radius也可以給它四個角分別設置角度，四個值依次代表左上，右上，右下，左下：
border-radius: 15px 15px 0px 0px;
box-shadow可以為元素設置邊框陰影。box-shadow設置的屬性如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平陰影的位置，可以是負值。
v-shadow 垂直陰影的位置，可以是負值。
blur 模糊距離。
spread 陰影的尺寸。
color 陰影的顏色。
inset 將外部陰影 (outset) 改為內部陰影。
以上 h-shadow ，v-shadow是必須要設置的，其他的可以根據需要去設置。
我們給上面的div元素添加陰影：
<div class="box"></div>
css樣式：
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
瀏覽器中查看效果：
border-image 使用圖片設置邊框。
如下：
<div class="box"></div>
我們先給div元素的邊框顏色設置為透明（transparent），然后在使用圖片設置邊框：
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果：
童靴們可能不懂為啥屬性的前邊會有-webkit-、-o-這樣的前綴呢？這是因為好多瀏覽器都不支持CSS的新特性，所以寫這些專屬的前綴是為了兼容各瀏覽器。
上一篇CSS3文章最后也講過各瀏覽器的前綴，童靴們自己去看一下。
css3 入門簡介 ——css3開課啦！
當你感到悲哀痛苦時，最好是去學些什么東西。學習會使你永遠立于不敗之地。
關注小白前端，持續收到文章推送！
人在校生一枚，希望可以找到志同道合的小伙伴一起進步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來寫代碼的
HTML 是個縮寫，全稱Hyper Text Markup Language，譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
在<hard>頭部標簽中你可以 插入腳本（scripts）,樣式文件（CSS），以及各種meta信息?？梢蕴砑釉陬^部區域的元素有：<title>，<style>，<meta>，<link>等等
注釋快捷鍵：CTRL+? （注釋是不被運行的，作用就是幫助程序員記東西）
<!--這是一個注釋-->HTML完整結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--頭部，js和css寫在這里面-->
</head>
<body>
<!--內容主體-->
</body>
</html>
可能我寫的會有些不清楚，到后面有代碼的時候就會清楚了
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
