Home > Web Front-end > HTML Tutorial > 图解CSS3 读书笔记--边框_html/css_WEB-ITnose

图解CSS3 读书笔记--边框_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:33:34
Original
1003 people have browsed it

CSS的边框

属性:border-style、border-width、border-color

写法:
分开写:E {border-style: solid;border-width: 1px;border-color: alicebule;}
合并写:E {border: 1px solid alicebule;}

注意:

  • border-style是必须属性,其他顺序可以打乱写

  • 如果设定 border:none,浏览器自动解析为border-style:none

  • 边框大小即border-width默认为medium

css3新增:
border-color、border-image、border-radius

CSS3:border-color

在css2中,我们可以运用border-color属性给元素的边框整体或者每一条边框上色,但是每条边框最多只能使用一种颜色。

而css3改进的border-color属性为我们提供了同一条边框设置多种颜色(比如说给边框添加一个渐变色,或者说一个彩色)的途径。不过到目前为止只有Firefox 3.0+的浏览支持这个属性。也是因为这一点,css3的border-color应用是相当的少。

上文提到过,css3border-color只有FF支持,故运用或测试时我们需要加上-moz-前缀。

用法:

.box{    border:5px solid transparent;    -moz-border-top-colors:<color1> <color2> <color3> <color4> <color5>;    -moz-border-right-colors:<color1> <color2> <color3> <color4> <color5>;    -moz-border-bottom-colors:<color1> <color2> <color3> <color4> <color5>;    -moz-border-left-colors:<color1> <color2> <color3> <color4> <color5>;}
Copy after login

我们这时给每一条边框都设置了5种颜色,且都占据着5px的宽度。这个时候每种颜色的border-width为1px。事实上,如果我们边框设置了x个像素的宽度,并且为每条边框设置了y种颜色,若x>y,则前y-1种颜色每种占据了1px,最后一种颜色占据x-y+1个像素。

实例:立体渐变效果

.box {    width: 200px;    height: 100px;    border: 10px solid transparent;    border-radius: 15px 0 15px 0;    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;  }
Copy after login

效果:

CSS3:border-radius

border-radius相信很多前端ers都很熟悉了,就是元素圆角效果。这个属性兼容了ie9+以及其他主流现代浏览器。

基本写法:

  • 设置统一半径的圆角:border-radius:

  • 设置多个半径的圆角: border-radius:

  • 设置水平垂直半径不统一的圆角:border-radius: /

  • 分开设置:

    border-top-left-radius: /
    border-top-right-radius: /
    border-bottom-left-radius: /
    border-bottom-left-radius: /

    为兼容其他老版本的的浏览器,需要为其加上前缀,并且写法有点区别:

    FF:-moz-border-radius-topleft
    Chrome:-webkit-border-top-left-radius

    图解CSS3中提到webkit内核浏览器下图片没有圆角效果,经过测试(基于当前本人的chrome 44+的版本)webkit内核较新版本的浏览器已经修正了这个问题。如下图

Chrome下:

FF下:

border-radius还可以做出如圆、半圆、四分之一圆、椭圆的效果:

  • 圆:

    .box {

       height: 100px;        width: 100px;        border-radius:100px;/*或者50%*/        background: aliceblue;     margin: 20px; 
    Copy after login

    }

  • 半圆:

    .box {

       height: 100px;   width: 50px;   border-radius: 50px 0 0 50px;/*分表表示左上角 右上角 右下角 左下角*/   background: aliceblue;
    Copy after login

    }

  • 四分之一圆:

    .box {

       height: 100px;   width: 50px;   border-radius: 50px 0 0 0;/*分表表示左上角 右上角 右下角 左下角*/   background: aliceblue;
    Copy after login

    }

  • 椭圆:

    .box {

       height: 100px;   width: 50px;   border-radius: 25px / 50px;/*分表表示水平半径 垂直半径。或者50% / 50%;*/   background: aliceblue;
    Copy after login

    }

CSS3:border-image

border-image属性用以给任何元素(除border-collapse属性为collapse的table元素)设置图片效果边框,可以用来制作圆角按钮效果,渐变tabs效果等。border-image允许你使用一张小图片,并且将它分割成九个小部分, 然通过延伸这个小部分使其构成一个更大的元素。

注意 ie并不支持border-image
Copy after login

写法:

border-image: url top right bottom left x-repeat y-repeat
Copy after login
  • url:采用的图片的路径

  • top,right,bottom,left:图片的切割方法,注意是不需要加单位的(加了会失效)。默认是px,但可以使用百分比

如图:

图片切割方式:
这里通过两个实例来说明图片切割方式:


通过切割左边的小图片,使其延展+拼接成右边的大图。
若是我们进行如下的分割:

这样图片的切割长度分别为:0(上) 30(右) 0(下) 30(左)
现在的情况就等于用4、6两块小图进行拼接和延伸:

很容易发现,只要我们在水平和垂直方向进行延展就会达成效果图的样子了。

如果图片切割成这样:


就会发现实际效果中,会多出上下边框的宽度。其他没有变化。

图片铺排方式:


左图水平和垂直方向都是stretch,右图水平是stretch,垂直是round


图一水平和垂直均为round,图二水平和垂直均为stretch,图三均为repeat

参考文章:Click

CSS3:box-shadow

box-shadow用来定义元素的盒子阴影。
IE8及以前的浏览器不支持box-shadow

用法:

border-shadow: 阴影类型 水平位移 垂直位移 模糊半径 阴影扩展半径 颜色
Copy after login
  • 阴影类型默认为: 外阴影,可设定唯一值:inset

  • 水平位移:x-offset。可取正负值,正值阴影在元素右方。

  • 垂直位移:y-offset。可取正负值,正值阴影在元素下方。

  • 模糊半径:值只能为正,取值越大,阴影边缘越模糊。

  • 阴影扩展半径:可取正负值。若无模糊半径,设置了扩展半径和为元素设置边框的效果一致。

多层阴影:
box-shadow可以多层阴影同时使用,每层阴影之间使用“,”隔开。设置在最前的阴影将显示在最顶层,所以一定要注意阴影的大小取值。
若阴影的设置为:0 0 0 20px lime, 0 0 0 10px yellow, 0 0 0 8px green
则这时第一层阴影的扩展半径为20,显示在最顶层;第二层阴影显示在第一层阴影之下,此时因为第一层阴影的扩展半径>第二层阴影的扩展半径,所以第一层阴影会把第二层阴影覆盖掉。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template