雨落辰潇-文档站

Appearance

CSS3 新增边框属性 ​

  • border-radius

    设置或检索对象使用圆角边框。

    提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 水平半径：

    如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

    如果只提供一个，将用于全部的于四个角。

    如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。

    如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

    垂直半径也遵循以上4点。

  • border-top-left-radius 设置或检索对象的左上角圆角边框

  • border-top-right-radius 设置或检索对象的右上角圆角边框

  • border-bottom-right-radius 设置或检索对象的右下角圆角边框

  • border-bottom-left-radius 设置或检索对象的左下角圆角边框

边框圆角 ​

CSS 属性名含义值
border-top-left-radius左上角圆角1~2个长度
border-top-right-radius右上角圆角1~2个长度
border-bottom-left-radius左下角圆角1~2个长度
border-bottom-right-radius右下角圆角1~2个长度
border-radius多个角圆角1~4个长度/1~4个长度

单个圆角属性值的设置规则：

sh
1. 设置一个长度，同时设置 x 半径和 y 半径
2. 设置两个长度，第一个是 x 半径，第二个是 y 半径，如果设置百分比，参照的是x轴和y轴的百分比

复合属性的使用：

css
/* 每个角x半径和y半径一致 */
/* 同时设置4个角 */
border-radius: 20px;
/* 左上和右下  左下和右上 */
border-radius: 10px 100px;
/* 左上 左下和右上 右下 */
border-radius: 10px 100px 50px;
/* 左上 右上 右下 左下 */
border-radius: 10px 30px 50px 80px;
css
/*每个角 x 半径 和 y 半径不一定一致 */

/* 
	/ 左边都是 x 半径，可以写 1 ~ 4 个长度， 
	/ 右边都是 y 半径，可以写 1 ~ 4 个长度， 
	两边长度的数量不要求一致，各自计算各自的。
*/

/* 分被设置 x 半径和 y 半径 */
border-radius: 100px / 10px;

/*  
	左上和右下x半径:100px; 左下和右上x半径:30px /  左上y半径:10px; 左下和右上y半径:40px; 右下y半	径:50px  
*/
/* 左上:100px 10px;  右上:30px 40px;  右下:100px 50px; 左下:30px 40px */
border-radius: 100px 30px / 10px 40px 50px;

边框图片 ​

  • border-image-source 设置或检索对象的边框样式使用图像路径。

    sh
    取值: url

  • border-image-slice 设置或检索对象的边框背景图的分割方式。

    sh
    取值: 浮点数/百分比

  • border-image-width 设置或检索对象的边框厚度。

    sh
    取值: 长度值/百分比/浮点数

  • border-image-outset 设置或检索对象的边框背景图的扩展

    sh
    取值: 长度值/浮点数

  • border-image-repeat 设置或检索对象的边框图像的平铺方式。

    css
    取值：
stretch： 指定用拉伸方式来填充边框背景图。 
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。 
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

  • border-image 复合属性。设置或检索对象的边框样式使用图像来填充。

    css
    border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

外轮廓 ​

CSS 属性名含义值
outline-style外轮廓风格同border-style
outline-width外轮廓宽度长度
outline-color外轮廓颜色颜色
outline复合属性多个值使用空格分隔
outline-offset与边框的距离
不是 outline 的子属性		长度，可以是负值

外轮廓与边框的区别：

CSS
外轮廓不是盒子的一部分，不影响元素的尺寸和位置！
outline 默认值为none
边框的默认值为字体的颜色，边框3px。

  • outline-width 外廓线宽度

    ： 用长度值来定义轮廓的厚度。不允许负值 medium： 定义默认宽度的轮廓。 thin： 定义比默认宽度细的轮廓。 thick： 定义比默认宽度粗的轮廓。

  • outline-style 外廓线风格

    none： 无轮廓。与任何指定的 <' outline-width '> 值无关

    dotted： 点状轮廓。

    dashed： 虚线轮廓。

    solid： 实线轮廓

    double： 双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值

    groove： 3D凹槽轮廓。

    ridge： 3D凸槽轮廓。

    inset： 3D凹边轮廓。

    outset： 3D凸边轮廓。

  • outline-color 外廓线颜色

  • outline-offset 外廓线的偏移量, 取值长度单位

  • outline 复合属性，给元素周围绘制一条轮廓线

    css
    <' outline-width '> || <' outline-style '> || <' outline-color '>

Copyright © 2024 雨落辰潇