課程
/前端開發
/HTML/CSS
/十天精通CSS3
求教這個是怎么實現的
2016-08-02
源自:十天精通CSS3 7-7
正在回答
翹邊陰影主要靠border-radius實現的 。
那就好。不用謝
建議你學一下http://www.xianlaiwan.cn/learn/240這個課程,css3實現翹邊陰影的效果。
番茄鹽煎肉 提問者
.effect::before, .effect::after{
? ? content:"";
position:absolute;?
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
使用的:after和:before添加空元素,然后設置邊框陰影圓角radius的值
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
1 回答用#陰影生效,用:沒陰影,為什么?
4 回答PSD設計稿里有文字陰影,前端怎么確定陰影的值呢?
3 回答陰影的X,Y偏移量是怎么回事
2 回答模糊半徑和擴展半徑怎么回事?多個外部陰影的時候,右下陰影,左上陰影怎么選擇的?內部陰影能只選擇某一條邊嗎?
1 回答添加多個陰影,每個陰影的顏色是怎么定的?最多能添加多少?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-10-13
翹邊陰影主要靠border-radius實現的 。
2016-08-03
那就好。不用謝
2016-08-02
建議你學一下http://www.xianlaiwan.cn/learn/240這個課程,css3實現翹邊陰影的效果。
2016-08-02
.effect::before, .effect::after{
? ? content:"";
position:absolute;?
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
2016-08-02
使用的:after和:before添加空元素,然后設置邊框陰影圓角radius的值