zoukankan      html  css  js  c++  java
  • CSS轮廓和圆角

    1        
      2 <!DOCTYPE html>
      3 <html lang="en">
      4 <head> 
      5     <meta charset="UTF-8">
      6     <title></title>
      7     <style>
      8     .box1{
      9         width:100px;
     10         height:100px;
     11         background-color:#bfa;
     12         padding:10px;
     13        
     14         /*
     15         box-shadow用来设置元素的阴影效果,阴影不会影响页面布局
     16             第一个值:水平偏移量 设置阴影的水平位置
     17             第二个值:垂直偏移量 设置阴影的垂直位置
     18             第三个值:阴影的迷糊半径
     19             第四个值:阴影的颜色
     20          */
     21         box-shadow:0px 0px 50px rgba(0,0,0,.5)
     22         
     23        
     24     /* 
     25        
     26         outline 用来设置元素的轮廓线和border的用法一样
     27             不同点:轮廓不会影响页面的布局
     28      */
     29     }  
     30     .box2{                                                         
     31         width:100px;
     32         height:100px;
     33         background-color:orange;
     34         
     35         /*
     36         border-radius用来设置圆角
     37         border-top-left-radius
     38         border-top-right-radius
     39         border-bottom-left-radius
     40         border-bottom-right-radius
     41         border-radius 可以指定四个圆角的圆角
     42             -四个值:左上,右上,右下,左下
     43             -三个值左上,右上/左下,右下
     44             -两个值:左上右下,右上左下
     45             (对角的公用)
     46          */
     47         
     48         @sC/*
     49         border-radius:10px / 40px;;
     50         将元素设置为一个圆形】
     51         */
     52         border-radius:50%;
     53         
     54     }  
     55     </style>
     56 </head>
     57 <body> 
     58     <div class="box1"></div>
     59     <div class="box2"></div>
     60 </body>
     61 </html>   
    笨鸟先飞
  • 相关阅读:
    *HDU2473 并查集
    *HDU3172 并查集
    *cf.4 贪心
    *HDU3635 并查集
    *HDU1325 并查集
    *HDU1829 并查集
    Node.js 学习笔记二
    Node.js 学习笔记 一
    AngularJS 学习笔记 一
    MongoDB 基础知识二
  • 原文地址:https://www.cnblogs.com/zoutingrong/p/13971263.html
Copyright © 2011-2022 走看看