CSS怎樣實現(xiàn)鏤空效果-創(chuàng)新互聯(lián)

這篇文章主要介紹了CSS怎樣實現(xiàn)鏤空效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為鲅魚圈等服務(wù)建站，鲅魚圈等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為鲅魚圈企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

效果原理

主要利用css漸變實現(xiàn)一些不需要切圖的背景鏤空

優(yōu)惠券樣式

.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
    width: @width;
    height: @height;
    background:
              radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% no-repeat,
              radial-gradient(circle at bottom right, transparent @r, @lcolor 0) -(@width - @left) bottom ~'/' 100% 51% no-repeat,
              radial-gradient(circle at top left, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% no-repeat,
              radial-gradient(circle at bottom left, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51%  no-repeat;
}

.mixinsTicket1(@width, @height, @r, @top, @color) {
   width: @width;
   height: @height;
   background:
               radial-gradient(circle at bottom left, transparent @r, @color 0) left (@top - @height) ~'/' 51% 100% no-repeat,
               radial-gradient(circle at top left, transparent @r, @color 0) left @top ~'/' 51% 100% no-repeat,
               radial-gradient(circle at bottom right, transparent @r, @color 0) right (@top - @height) ~'/' 51% 100% no-repeat,
               radial-gradient(circle at top right, transparent @r, @color 0) right @top ~'/' 51% 100%  no-repeat;
   &::after{
     content: '';
     display: block;
     position: absolute;
     width: calc(100% - 2 * @r);
     left: @r;
     top: @top;
     border-top: 1px dashed #fff;
     transform: translateY(.5);
   }
}

切角效果

ps: 鋸齒跟設(shè)備的顯示有關(guān)系

.mixinFlag(@width, @height, @bg) when(default()) {
    width: @width;
    height: @height;
    background:
              linear-gradient(45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) right,
              linear-gradient(-45deg, transparent sqrt(pow(@width/2, 2)/2),  @bg 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
 }
 .mixinFlag(@width, @height, @bg) when(@width > @height) {
    width: @width;
    height: @height;
    background:
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left,
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.mixinsMark(@width, @height, @bg) {
    width: @width;
    height: @height;
    background:
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left,
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

ps:以上效果四個方向都可以實現(xiàn)，其他方向代碼沒有貼出，原理相同

格子布

css {
    width: 510px;
    height: 128px;
    background: #FFF;
    background-image: linear-gradient(rgba(182, 128, 102, .8) 8px, transparent 0),
                      linear-gradient(90deg, rgba(182, 128, 102, .8) 8px, transparent 0);
    background-size: 8px 14px, 14px 8px;
}

焦點

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background:
  radial-gradient(closest-side at 50% 278rpx, transparent 140rpx, rgba(0, 0, 0, .12) 180rpx, rgba(0, 0, 0, .22) 200rpx, rgba(0,0,0,.3) 220rpx, rgba(0,0,0, .4)) no-repeat;
}

總結(jié)

每一層漸變都可被當(dāng)做一張背景圖，也就是說每一層漸變都可以指定其position、size、repeat。玩過PS的的同學(xué)應(yīng)該知道圖層的概念，咱們的背景圖層疊原理也類似（當(dāng)然，漸變也可以當(dāng)背景圖），控制漸變的大小，哪里需要鏤空，以及需要顯示的位置、是否平鋪，就可以實現(xiàn)大多數(shù)場景下的基本效果，當(dāng)然，一張切圖來的更快，但是有時候切圖并不能適應(yīng)所有的場景。

掌握background的書寫順序可以幫助在腦海中構(gòu)思自己想要的效果：

代碼如下:

background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS怎樣實現(xiàn)鏤空效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享標(biāo)題：CSS怎樣實現(xiàn)鏤空效果-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article32/cdjosc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、服務(wù)器托管、App開發(fā)、網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計公司、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)