• 什么是轮廓阴影和圆角

    目录

    outline

    box-shadow

     将元素设置为一个圆形

    outline

    outline 用来设置元素的轮廓线，用法和border一模一样

    轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.            margin-top: 200px ;
    14.             border: 20px red solid;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <div class="box">div>
    20.     <span>hellospan>
    21. body>
    22. html>

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.            margin-top: 2px ;
    14.             outline: 10px red solid;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <div class="box">div>
    20.     <span>hellospan>
    21. body>
    22. html>

    box-shadow

    box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

    第一个值：水平偏移量 设置阴影的水平位置，正值向右移动 负值向左移动

    第二个值：垂直偏移量 设置阴影的水平位置    正值向下移动  负值向上移动

    第三个值：阴影的模糊半径

    第四个值：阴影的颜色

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.            margin-top: 2px ;
    14.             border: 10px red solid;
    15.             box-shadow: 0px 0px 50px black;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <div class="box">div>
    21.     <span>hellospan>
    22. body>
    23. html>

      border-radius

    border-radius:用来设置圆角，圆角设置的圆的半径大小

    border-top-left-radius 左上角

    border-top-right-radius 右上角

    border-bottom-left-radius 左下角

    border-bottom-right-radius 右下角

    border-radius 可以分别指定四个角的圆角

    四个值：左上 右上 右下 左下

    三个值： 左上 右上/左下  右下

    两个值     左上/右下    右上/左下

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.             border-top-left-radius: 20px;
    14.           
    15.            
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <div class="box">div>
    21.     <span>hellospan>
    22. body>
    23. html>

     将元素设置为一个圆形

     border-radius: 50%

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.             border-radius: 50%;
    14.           
    15.            
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <div class="box">div>
    21.     <span>hellospan>
    22. body>
    23. html>

     

  • 相关阅读:
    MySQL：字符串中的数字、英文字符、汉字提取 Num_char_extract函数
    数据库总结之高级篇
    java如何获取昨天的日期/明天的日期？
    【微服务网关——Websocket代理】
    HDLbits:Dff16e
    基于区块链的隐私保护数据共享
    [数据结构]-二叉搜索树
    机器人系统，如何快速算法开发与原型机验证？
    Node 进阶学习
    电脑系统重装下载的系统在哪找到
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127627766