码迷,mamicode.com
首页 > Web开发 > 详细

css stitched实现效果

时间:2015-07-14 19:46:06      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

代码如下:

.stitched {
   padding: 20px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

效果如下:

技术分享

 

知识点:border-radius + box-shadow来实现。

box-shadow: inset x-offset y-offset blur-radius spread-radius color.

inset:将外阴影变成内阴影

x-offset: 阴影水平偏移量

y-offset: 阴影的垂直偏移量

阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小.

 

css stitched实现效果

标签:

原文地址:http://www.cnblogs.com/avivaWang/p/4646101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!