首页 > Web开发 > 详细

CSS 设置圆角div和阴影效果

时间:2020-04-15 15:14:18      阅读:70      评论:0      收藏:0      [点我收藏+]
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="div">
    <img src="../img/b.jpg" width="200px">
    aaa
</div>
 
<style type="text/css">
 
    .div{
        /*阴影效果*/
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
        -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
        -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
        box-shadow:2px 2px 10px #909090;/*opera或ie9*/
    }
 
 
    .div{
        background-color: hotpink;
        width: 300px;
        height: 400px;
        /*圆角效果*/
        border-radius: 20px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
    }
 
    img {
        margin: 20px 0 0 20px;/*圆角效果*/
-webkit-border-radius: 20px; <span style="font-family: Arial, Helvetica, sans-serif;">-moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5); -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5); box-shadow: inset 0 1px 5px rgba(0,0,0,.5); }</style></span><span style="font-family: Arial, Helvetica, sans-serif;"></body></html></span>

  

CSS 设置圆角div和阴影效果

原文:https://www.cnblogs.com/njccqx/p/12705394.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!