CSS border系列

  • 2016年10月05日
  • 0 Comments

CSS BORDER系列

一、border

关于border的3个属性,分别为border-width、border-style、border-color。

其中,border-color默认为元素内容的前景色;border-width默认为关键字medium,但是border-style默认值为none;所以,不指定border-style,边框将不存在。

关于border-color

transparent,据说特定情况下有奇效,需要知道有这样一个可选值。

white,白色的dotted边框,有时候会有奇效。

比如:

更确切地说,应该是颜色与父元素的背景颜色一样的dotted/dashed边框。

8种border-style

(只有记住了,才能在需要的时候合理使用。)

关于mixed border

利用CSS的层叠,我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色,取决于具体情况。

小tips:边框模拟,等高布局

View Code

其实现原理为:左列边框宽度与margin负值相结合,让右边框成为右列的背景。

二、border-radius

语法规则:

border-radius:a b c d; 顺序依次为上左、上右、下右、下左。(顺时针方向)

border-radius:a b c d/a b c d ;第一组为水平数值,第二组为垂直数值。

border-top-left-radius:a b; 单个圆角的设立。

(定义单个圆角时,一定要先上下、后左右,否则无效。)

注意:

圆角生效并不以边框的存在为前提,也就是说,即使没有边框,也能设立圆角。

小tips:border-radius:50%

三、border-image

与border-radius不同,border-image以border的存在为前提;其本质是将border-style替换成image。

语法规则:

border-image-source

支持none和url两种选择;(如果是none的话,下面就不用看了。。。)

border-image-slice

按top、right、bottom、left的顺序指定九宫格的切法;支持纯数字和百分数。

(纯数字自带px单位;百分数以图像的宽高为基准计算。)

fill,可选;默认情况下第九区是不显示的;指定了fill才会显示出来;在border-image-slice中指定。

border-image-width

按top、right、bottom、left的顺序指定border-image-width,覆盖border-width;可选。

经测试,border-image-width大于border-width时,会向内扩展(外面那条线不变,向里面扩展增加宽度),但是只是它的独角戏,除了它自己发生了变化之后,其它任何东西都不会变化;它会侵入padding区甚至内容区。

border-image-width小于border-width时,会向外收缩(外面那条线不变,里面这条线向外收缩),与padding区或者内容区留出空隙。

可以为0,即border-image不存在;但不能为负值。

(个人建议,此属性看看就好,就让它默认等于边框的宽度吧。)

border-image-outset

按top、right、bottom、left的顺序指定图像向外移动的距离;可选;支持像素距离和纯数字。

像素距离好理解,20px就是移动20px的意思;纯数字是指border-width的倍数。(注意,是border-width,不关border-image-width的事。)

请注意,这里用的是移动这个词,并不是扩展。

border-image-repeat

按top、right、bottom、left的顺序指定如何填充边框的空白;接受两个值,一个水平方向,一个垂直方向。

默认stretch(拉伸),可选repeat(重复)和round(平铺)。

这里只是一些我对这些属性使用方法上的总结,并没有对属性本身的含义与机制作出说明。

关于这5个属性的具体说明,推荐一篇文章,css3:border-image边框图像详解,写得很好,非常仔细,我这么小白都看懂了。

outline

outline-width、outline-style、outline-color;语法和表现都和border一样,但是不占任何文档空间。

outline-offset,定义outline和border(padding、content area)的距离,与margin没有关系。

四、box-shadow

语法规则:

h-shadow(必需,水平阴影的位置,可负);

v-shadow(必需,垂直阴影的位置,可负);

blur(可选,模糊距离);

spread(可选,阴影的尺寸);

color(可选,阴影的颜色);

outset(默认)/inset(可选,将外部阴影改为内部阴影)。

box-shadow应用

CSS:

1 .container {2 width:200px;3 height:100px;4 background-color: #ccc;5 border:10px solid red;6 border-radius: 10px;7 box-shadow: 0 0 0 10px green;

8 }

效果:

View Code

欢迎各位大牛、大神或者想学习的朋友莅临加我QQ进行交流:647886443


本文来自网络,版权归原作者所有。来自:http://www.toutiao.com/a6310452761319276801/


分享到: 新浪微博 微信 更多

发表评论  (一键登陆)

搜索...
最新:
推广工具视频演示:
更多精彩请关注 :
果真平台二维码