您的位置：首页 > Web前端 > CSS

CSS中box-shadow、text-shadow用法

2015-11-27 17:24 615 查看
当我们在设计前端页面的时候，为了达到阴影效果，这是可以用box-shadow与text-shadow来设置元素的阴影。可能的参数值有

基本语法为box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}

其中第一个参数表示阴影的投放方式，inset表示内阴影，默认为外阴影；

第二个参数4px表示阴影水平偏移量其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

第三个参数表示阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

第四个参数表示阴影模糊的半径，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

第五个参数表示阴影的颜色；

其中第二和第三位必要参数，

如果只想设置元素一个边框有效果，可以再加一个属性，box-shadow:inset 4px 4px 10px  -10px  #d9d9d9;，红色代表阴影扩展的长度值，具体效果大家可以在浏览器中调试一下。

<html >

<head>

<meta charset=" utf-8"> 

<style type="text/css">

div{

   margin:50px 50px 50px 50px;

   width:200px;

   height:50px;

   line-height:33px;

   padding-left:10px;

   color:#b4b4b4;

   border: 2px solid #939393;

   border-radius:4px;

  }

.div1{

   box-shadow:inset 4px 4px 5px red;

}

.div2{

   box-shadow:4px 4px 5px red;

}

.div3{

   box-shadow:inset 4px 4px 5px red,inset -4px -4px 5px red;

}

.div4{

   box-shadow:0px 0px 10px red;

}

</style>

</head>

<body>

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

<div class="div4"></div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航