css边框的学习笔记

原创 2018-11-27 23:43:50 124
摘要:<!DOCTYPE html><html><head>      <meta charset="utf-8">      <title>边框</title>  <!--      <li

<!DOCTYPE html>

<html>

<head>

      <meta charset="utf-8">

      <title>边框</title> 

 <!--      <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

      <link rel="stylesheet" type="text/css" href="css/index.css"> -->

      <style type="text/css">

      .box{width: 100px;height: 100px;border: 1px /*solid*实线//*double*双线//*dashed虚线*//* dotted 点状虚线*/ solid #ccc;border-radius:/*10px*/50px/*圆角度数*/;}

      .main{width:1000;height:100px;border-top:1px solid red;background:#ccc;border-left:1px solid red;border-right:1px solid red;}

      button{border:none;}/*清除自带边框*/

  .shadow{width:300px;height:40px;box-shadow:/*1*/0px/*(x轴)*/ 5px/*(y轴)*/ /*3*/20px/*(阴影的宽度)*/ #ccc /*inset*//*(内部阴影)*/;/*border:1px solid #ccc;*/}

      </style>   

</head>

<body>

<div class="box"></div>

<div class="main"></div>

<button>登录</button>

<div class="shadow"></div><!-- 可用来做圆柱的效果 -->



</body>

</html>


批改老师:灭绝师太批改时间:2018-11-28 09:03:47
老师总结:完成的不错!后面的学习会带你完成更精彩的效果!

发布手记

热门词条