• 什么是轮廓阴影和圆角

    目录

    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>

     

  • 相关阅读:
    CAD二次开发---关于JoinEntity出现eNotApplicable的问题
    LDAP客户端操作方法
    Ubuntu 添加gcc头文件搜索路径
    基于java校园二手物品交易系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
    map与unordered_map的用法
    实验四 内核线程管理-实验部分
    emqx 启动正常，但是1883端口无法telnet，emqx无法正常工作
    1844. 将所有数字用字符替换
    C# 实用的第三方库
    批量执行redis命令总结
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127627766