HTML5权威指南读书笔记10（第19章）--边框和背景-CSDN博客

本文链接：https://blog.csdn.net/weixin_43745804/article/details/110006379

1、概述

在这里插入图片描述

2、边框样式

border-width，border-style，border-color

3、边框样式列表

在这里插入图片描述

4、单边样式

在这里插入图片描述

5、border简写

略

6、border-radius圆角边框

<head>
    <style type="text/css">
        .myclass{ width: 200px; height: 200px; border-radius: 15px; border: 1px solid black;}
    </style>    
</head>
<body>
   <div class="myclass">
      here is about radius
   </div>
   
</body>

7、border-image属性

类似于java的9path
在这里插入图片描述

8、设置元素的背景

在这里插入图片描述

8、背景重复

在这里插入图片描述

9、backgroup-size属性的值

在这里插入图片描述

10、backgroup-position背景位置

在这里插入图片描述

<head>
    <style type="text/css">
        .myclass{ width: 200px; height: 200px; border-radius: 15px; 
        border: 1px solid black; background-image: url(./images/icon.ico); 
        background-repeat: no-repeat; background-position: 30px 40px;}
    </style>    
</head>
<body>
   <div class="myclass">
      
   </div>
   
</body>

11、设置元素的背景附着方式

在这里插入图片描述

12、设置背景图像的开始位置background-origin和裁剪方式background-clip属性

在这里插入图片描述

13、background简写属性

略

14、box-shadow创建盒子阴影

在这里插入图片描述

<head>
    <style type="text/css">
        .myclass{ width: 200px; height: 200px; box-shadow: burlywood  5px 15px 15px 15px;}
    </style>    
</head>
<body>
   <div class="myclass">
      
   </div>
   
</body>

15、创建多个阴影

应用多个阴影

.myclass{ width: 200px; height: 200px; box-shadow: burlywood  5px 15px 2px 15px,5px 5px 5px 5px red;}

16、应用轮廓outline

outline对于边框来说是可选的，短时的，不属于页面，应用轮廓不需要调整页面布局
在这里插入图片描述
outline属性的属性值的设定和border一致

<head>
    <style type="text/css">
        .myclass{ width: 200px; height: 200px; outline: 1px solid red;}
    </style>    
</head>
<body>
   <div class="myclass">
      
   </div>
   
</body>