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>

  • 相关阅读:
    第06组 Alpha冲刺(6/6)
    第06组 Alpha冲刺(5/6)
    第06组 Alpha冲刺(4/6)
    第06组 Alpha冲刺(3/6)
    第06组 Alpha冲刺(2/6)
    第06组 Alpha冲刺(1/6)
    第06组 团队Git现场编程实战
    团队项目-需求分析报告
    团队项目-选题报告
    第二次结对编程作业
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13048360.html
Copyright © 2011-2022 走看看