第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

CSS實現(xiàn)多重邊框解決方案

標(biāo)簽:
CSS3

1.box-shadow解决方案
首先,先看下box-shadow的语法: box-shadow: h-shadow v-shadow blur spread color inset;,其中第一、二个参数是分别是阴影的水平和垂直偏移量,第三个参数是阴影的模糊值,第四个参数是阴影的扩张半径(或叫尺寸/大小)<!--more-->。
利用两个为零的偏移量和一个为零的模糊值加上一个正值的扩张半径可以投影出一个实线边框。
eg.

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

因为box-shadow支持逗号分隔法,因此我们可以创建任意数量的投影(边框)

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);//再加上一个正常的投影

使用多重投影解决方案需要注意的地方:
1.不受box-sizing影响
2.不响应鼠标事件,可以加上关键字inset来使投影绘制在元素内圈来解决
3.只能绘制实线边框

2.outline(描边)方案
首先,看下outline的语法:outline: outline-color outline-style outline-width。
利用outline可以实线两层边框

background: yellowgreen;
border: 10px solid #65;
outline: 5px solid deeppink;

利用outline-offsert(outline-offset: length|inherit;)对描边进行偏移实现缝边效果,

background: #655;
border: 10px solid #655;
outline: 2px dashed white;
outline-offset: -10px;

使用outline方案需要注意的地方:
1.只能绘制两层边框
2.边框不会贴合border-radius产生的圆角,被css工作组认为是一个bug,未来可能会改变为贴合
3.边框的样式灵活(dotted、dashed、solid、double等等),不局限于实线边框

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消