CSS样式——增加边框质感的小技巧
2013 年 6 月 4 日 by admin · 暂无评论
IT男在HTML，CSS样式、布局方面也是一知半解，可是自己博客不自己动手，如何丰衣足食？遂决定自己更改样式！当然当中遇到了不少问题，同样也有了不少收获，记录下来并分享给大家！希望给那些对样式不熟悉的兄弟姐妹们一丢丢帮助！

原来的主题简单、干净，可是缺少了那么点质感和高级的感觉。通过观摩别人的博客，偷师了关于提高边框质感的方法：

1、弧形边框：

border-radius ： none | {1,4} [/ {1,4} ]?

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有 “/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设 置的其主要会有下面几种情形出现：

1、border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等

2、 border-radius:[ {1,4} ] [ {1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个 值

3、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置 bottom-right

4、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置 bottom-left

演示：
border-radius: 15px viagra dosage 15px 15px 15px; /*圆的半径为边长的一半，即5px*/

原图< = >更改后

2、阴影效果：

box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。

取值：

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

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

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

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

演示：
box-shadow: 0 1px 3px 0 #AAAAAA;

原图< = >更改后

3、图片相框效果：

演示：
padding: 2px; /* 实现图片的相框的效果，数值也大图片外边框越宽 */
border: 2px solid #EEEEEE; /* 相框外面的边儿 */

原图< = >更改后

4、以上效果综合后对比：
原图< = >更改后

虽然这些看上去很微小的细节，但是我保证加上去效果明显不同，差距往往都是体现在细节方面的。如有大虾有补充，尽情拍砖!

除非注明，IT男博客文章均为原创，转载请以链接形式标明本文地址。

其他相关视频请点击： it男-技术墙

本文地址：http://www.it-nan.com/css样式-增加边框质感的小技巧/