css边框和背景设置

来源：互联网发布：南通醋酸纤维知乎编辑：程序博客网时间：2024/05/16 04:17

一、initial
initial 关键字用于设置 CSS 属性为它的默认值。
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
他和inherit类似，inherit是使用其父元素的对应属性。

二、border-radius       圆角边框的设置
border-radius可以设置四个值，分别是左上角、右上角、左下角、右下角。
你也可以分开来使用，按照上面的次序分别为：
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

eg.border-radius:10px;
我认为这里的10px是指长度为10px的直线变成了圆角。所以才会数值越大，圆角边框越大。

三、使<html>的高度为屏幕的高度
在css中，如下设置：
html{
    height:100%;
}

四、background-size         控制图片如何填充元素
1、auto           默认值，图像以本尺寸显示
2、cover          等比例缩放图片，使图像至少覆盖容器，但有可能超出容器。
3、contain        等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合。
4、长度值，如px、em
5、百分数，如100%
分析：属性值cover和contain都是等比例缩放图片的，图片中的图像不会被拉长，只会等比例变化
属性值使用长度值和百分数，会将图片的长或高拉长到设定的值，从而会影响图片中图像的显示。

五、background-origin       规定了background-position属性相对什么位置来定位
border-box            背景在border、padding、element上
padding-box           默认值，背景在padding、element上
content-box           背景在element上

六、background-clip         规定了从什么位置来裁剪背景图片
border-box            保留border、padding、element处的背景图片
padding-box           保留padding、element处的背景图片
content-box           只保留element处的背景图片

0 0