CSS3---边框

一、css简介

CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

总的来说CSS3主要拥有以下几个新的亮点：高级选择器，圆角，多背景，自定义字体，动画与过渡，渐变色，box阴影，rgba颜色表示，文字阴影，图形化边界等。

二、CSS3边框

1.border-redius 圆角边框

可以使尖锐的角转变为圆滑的角

• 格式 ：border-radious单位可以使px像素，也可以是%

border-radious:10px；                 四个角的值都为10px
border-radious:10px 20px；            10px:左上角和右下角；20px:右上角和左下角
border-radious:10px 20px 30px;        10px:左上角  20px:右上角和左下角   30px：右下角
border-radious:10px 20px 30px 40px    左上角 右上角 右下角 左下角（顺时针旋转）

• 修改某一个角的方法

border-top-left-radious         左上角
border-top-right-radious        右上角
border-bottom-right-radious     右下角
border-bottom-left-radious      左下角

•  注意

（1）制作圆角按钮式，border-radious的值是高度的一半

.box1{
        width: 200px;height: 50px;
        background-color: pink;color: white;
        border-radius: 25px;
        text-align: center;line-height: 50px; 
}

 

（2）在修改一个方向的角时，可以设置x轴和y轴的值，来使得一个方向的角呈现不同的效果,50px代表x轴，20px代表y轴   

.box2{
        width: 300px;height: 100px;
        background-color: #ff6700;
        border-top-left-radius: 50px 20px;
}

（3） 若四个角的x轴和y轴都需要修改成同样的角,就用x轴/y轴来控制

.box3{
        width: 300px;height: 300px;
        background-color: red;
        border-radius: 50px/20px;
}

 

2.box-shadow 添加阴影

添加阴影效果，一般用于鼠标移入后的效果

• box-shadow的参数

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

box-shadow:x轴偏移 y轴偏移 阴影模糊半径  阴影扩展半径 阴影颜色 阴影类型

• 注意事项：一般不常写阴影扩展半径，阴影类型

第一、x轴偏移：px值越大，阴影在x轴从左往右偏移越厉害，如果是负数，负数越大，则阴影在x轴从右往左偏移越厉害

第二、y轴偏移：px值月打，阴影在y轴从上往下偏移越厉害，如果是负数，负数越大，则阴影在y轴从下往上偏移越厉害

第三、如果x、y轴为0，则阴影就在元素的正下方向外扩展

第四、阴影模糊半径：px值越大，阴影模糊的效果就越大，px值越小，阴影模糊效果越不明显，为0px时可以看到尖锐的阴影

第五、阴影扩展半径：px值越大，会根据阴影的位置向外扩展，阴影显示会加深

第六、阴影颜色：阴影颜色可以使用一般的颜色代码，也可以使用rgba

注意：Rgba（0,0,0,0.5）：前面三个0表示红黄蓝配色，最后一个0.5表示透明色，0就是完全透明，0.5是半透明，1是不透明，设置为0.5半透明就会使得阴影颜色和背景相配对

第七、内阴影：使用设置阴影类型为inset

• box-shadow的多阴影添加方式

一个元素可以添加多个不同类型的阴影，多个阴影也会重叠，最先写的阴影将显示在最顶层，格式如下：

box-shadow:10px 10px 10px red,10px 10px 5px blue inset（每种阴影之间用逗号隔开）

.box{
        width: 200px;height: 200px;
        background-color: blue;
        box-shadow:10px 10px 10px rgba(0,0,0,0.8),10px 10px 15px red,-10px -10px 15px green;
}

 

3.border-image 边界图片

• border-imaged的参数

border-image: source slice width outset repeat;

border-image:位置 向内偏移 边框宽度 超出边框的量 平铺

 

border-image-repeat

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

 

.block{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            margin: 0 auto;
            border-image: url("./img/1008374000-59a90d9239c11_articlex.png")27 round;
}

 

4.text-shadow 文字阴影 

 text-shadow用于使文字产生阴影效果，text-shadow的用法与box-shadow相似

• text-shadow的参数

 text-shadow: 10px 10px 10px red;

text-shadow ： X轴偏移    Y轴偏移   阴影模糊半径    阴影颜色;

 .text{text-shadow: 10px 10px 15px red;}

• text-shadow的多阴影添加方式

text-shadow也可以进行多阴影的设计，写法和box-shadow的一样

.text{text-shadow:10px 10px 10px red,10px 10px 5px blue;}（每种阴影之间用逗号隔开）

三、CSS3字体

自定义字体@font-face

1、@font-face介绍
@font-face用于自定义显示的字体，将我们需要的字体传送到服务器中，在访问服务器时就会自动加载字体

2、@font-face语法格式
@font-face {

      font-family: 字体名称;

      src: 字体路径，需要将本地字体库上传到服务器端;需要用url（本地字体存放领）

      font-weight: 字体粗细;

      font-style: 字体风格，例如倾斜等等;

   }

font-family与src是必填的，一般设置自定义字体就设定这两个属性就可以了