zoukankan      html  css  js  c++  java
  • css:css3(圆角边框、盒子阴影、文字阴影)

    1、圆角边框

    定义圆角边框后,可以将盒子定义为圆角的

    (1)长度方式

    <html>
    
        <head>
            <meta charset="utf-8">
            <title>盒子模型外边距</title>
            <style>
              div{
                   200px;
                  height: 100px;
                  background-color: yellowgreen;
                  border-radius:3px;
              }
            </style>
        </head>
        <body>
        
       <div></div>
         
        </body>
    </html>

    设置成高度的一半:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 100px;
                  background-color: yellowgreen;
                  border-radius:50px;
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

    (2)百分比方式

    圆形:长度为正方形的一半:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title>盒子模型外边距</title>
            <style>
              div{
                   200px;
                  height: 200px;
                  background-color: yellowgreen;
                  border-radius:50%;
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

     百分比方式定义盒子:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 100px;
                  background-color: yellowgreen;
                  border-radius:5%;
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

     
    (3)不同的角设置不同的圆角

    以左上角为起点,顺时针的方式

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 200px;
                  background-color: yellowgreen;
                  border-radius:10px 20px 30px 40px;
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

     (4)选择角去设置:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 200px;
                  background-color: yellowgreen;
                  border-bottom-right-radius: 16px;
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

    2、盒子阴影

     (1)前两个为必选项,后四个可写可不写

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 200px;
                  background-color: yellowgreen;
                  border-radius: 16px;
                  box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

    (2) 只写前两个属性:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 200px;
                  background-color: yellowgreen;
                  border-radius: 16px;
                  box-shadow:10px 10px;
              }
            </style>
        </head>
        <body>
           <div>
               
           </div>    
        </body>
    </html>

    3、文字阴影

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
              div{
                   200px;
                  height: 200px;
                  text-shadow: 5px 5px 6px rgba(0,0,0,0.3);
              }
            </style>
        </head>
        <body>
           <div>
                  人之初,性本善
           </div>    
        </body>
    </html>

  • 相关阅读:
    Spring源码:Spring IoC容器加载过程(1)
    Spring源码:Spring IoC容器加载过程(2)
    logback日志异步打印
    Spring Boot学到的内容
    JavaScript——数组的indexOf()方法在IE8中的兼容性问题
    聊聊字符串拼接的哪一些事儿
    C# LINQ学习笔记五:LINQ to XML
    聊聊多线程那一些事儿(task)之 三 异步取消和异步方法
    C# 中的IComparable和IComparer
    .net core 简单定时程序
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13048360.html
Copyright © 2011-2022 走看看