CSS 设置圆角div和阴影效果

</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>

  

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

时间: 2024-10-03 15:48:27

CSS 设置圆角div和阴影效果的相关文章

网页设计入门--如何使用css设置圆角

下面是我用html+css执行出来的结果,图片的圆角在不同的位置: 对应的代码如下: 1 <html> 2 <head> 3 <title>my first text html</title> 4 <style type="text/css"> 5 .yuanjiao{ 6 width:400px; 7 height:100px; 8 text-align:center; 9 background:#33CC33; 10 bo

css 设置圆角

CSS3 圆角(border-radius) -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome. example: <span class="pull-left col-xs-3 user-face"> <img class="media-object img-thumbnail" ng-src="${ctx!}/im

css——设置圆角border-radius值为50%安卓各版本会变形

参考: https://blog.csdn.net/lilinoscar/article/details/80539725 需求:tab切换,选项高亮. 原css:圆圈元素会有的扁,有的圆.刚开始审查元素时发现border超出,以为是这个问题.后来参考文章后发现是单位问题. .cirlce { width: .3rem; height: .3rem; border-radius: 50%; border: 1px solid #ccc; } .cirlce.active { border: 1p

如何利用CSS设置文字的阴影效果

如何利用CSS设置文字的阴影效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.有时候需要给文字加上阴影,下面就结合实例简单介绍一下如何给文字加上阴影效果.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

CSS设置div的最小高度和最小宽度

CSS设置div的最小高度和最小宽度:所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍.如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如下:

CSS设置div的最小高度和最小宽

CSS设置div的最小高度和最小宽度: 所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍. 如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如

几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等

1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即可. 2)position值为relative时(绝对定位),css设置属性    text-align:center; left:50%;  margin-left:-500px;(左边距margin-left设置为当前div宽度的一半的负值即可). 代码示例: .page { position:

DIV+CSS设置及问题总结

web上方紧贴工具栏的方式使web上方接触工具栏  * { margin:0; padding:0; list-style:none;}*代表对所有的HMTL控件进行设置 设置让一个div在页面中居中的办法设置该div的margin属性的left.right为auto :如: .div{ margin:1px auto ;} ul横向排列1.读取出li 前面的.  ul的 list-style: none; 如:   #tab ul   { list-style: none;}2.设置ul 横向

CSS设置div层充满整个网页

div的100%是从其上一级div的宽高继承来的,要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效. 前面总得有个容器说明他的高度是多少.这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度,而不是100%. 解决方法:只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果. 1 html, body{