kkw学习css的过程,第6天，边框相关

border： 这属性，好像我开始学前端的时候就有了，设置元素的边框线

一般是 border: 1px solid color;

1、border-image: 边框图片

border-image: url('')

border-image-source:用在边框的图片的路径
border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

暂时还没有用到这个属性，
官方的dome:

注释：Internet Explorer 不支持 border-image 属性。

Search

这是我们使用的图片：

2、border-radius: 设置圆角，

border-radius: 设置圆角，当百分之五十的时候，变为一个圆。

border-radius: 50%; border-radius: 10px;

border-bottom-left-radius: 10px; 下左
border-bottom-right-radius: 10px; 下右
border-top-left-radius: 10px; 上左
border-top-right-radius: 10px; 上右

还可以设置奇奇怪怪的东西===>

    

        哈哈哈哈
    

3、box-shadow: 设置元素的周边阴影，

box-shadow: 水平偏移，垂直偏移，模糊距离，阴影尺寸，颜色，内部或外部阴影(默认外部)。

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

当前面设置三个值的时候，取前面三个，(水平偏移，垂直偏移，模糊距离)inset内部，outse外部
当设置水平与垂直的偏移都为0的时候，设置的四边的阴影，
box-shadow与text-shadow：基本上是类似的，一个作用于元素，一个作用于文字。

    

        哈哈哈哈