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>

  • 相关阅读:
    RequireJS 模块化加载框架使用
    MySQL数据类型(最大值 和 最小值)
    utf-8的中文是一个字符占几个字节
    spring的事务是什么?与数据库的事务是否一样
    事务和锁机制是什么关系? 开启事务就自动加锁了吗?
    关于数据库主键和外键
    浅谈Mysql共享锁、排他锁、悲观锁、乐观锁及其使用场景
    TCP/IP协议
    分库分表分区需要考虑的问题及方案
    Redis(十一):Redis的事务功能详解
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13048360.html
Copyright © 2011-2022 走看看