22、轮廓和圆角

最新推荐文章于 2022-04-11 16:35:57 发布

五仁卤鸡翅

最新推荐文章于 2022-04-11 16:35:57 发布

阅读量270

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106930949

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
轮廓和圆角

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

轮廓和圆角

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
  
    1、outline 用来设置元素的轮廓线，用法和border一样
              和border 不同地方就是轮廓不会影响到可见框的大小
          
    
    outline:10px red solid;
    
   
   2、box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
                 (阴影默认在元素的正下方，所以会被原来元素遮挡，看不见)
                 使用偏移量进行 设置，显示阴影 
                 第一个值 设置阴影水平位置，正值向右移动，负值向左移动
                 第二个值 垂直偏移量 设置阴影垂直位置，正值向下移动，负值向上
                 第三个值 阴影的模糊效果 值越大 阴影越模糊 
                 第四个 阴影的颜色 
    */ 
    box-shadow:10px 10px  rgba(0.0.0.0.3)
}
.box1::hover{
    outline:10px red solid 
}

.box2{
    width:200px;
    height:200px;
    background-color:orange;
    
 
 3、border-radius:用来设置圆角设置半径大小
                  第一个值：水平方向的半径大小
                  第二个值：垂直方向半径大小     
      
      border-top-left-radius:     左上角
      border-top-right-radius:    右上角
      border-bottom-left-radius   左下角
      border-bottom-right-radius  右下角
          

    border-top-left-radius:10px 20px;
    
 
  4、border-radius 指定四个角的圆角
            四个值 左上 右上 左下 右下
            三个值 左上 （右上左下） 右下
            二个值 （左上右下） （右上左下）
            一个值 四个角设置相同
   
    border-radius:10px 20px 10px;
    
    
5、将元素设置为一个圆形
       border-radius:50%; 
        
        
}

           
</style>
<body>
<div class="box1"></div>  
<div class="box2"></div>
</body>
</html>