我的web程序设计学习记录5

最新推荐文章于 2024-09-29 16:44:46 发布

阿澜澜儿

最新推荐文章于 2024-09-29 16:44:46 发布

阅读量152

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/zx616122/article/details/106342445

版权

css边框与背景

1.设置背景图的大小

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  
  <style type="text/css">
   body{
    background: url(p.jpg);
    background-size: 63px auto;
    background-repeat: no-repeat;
    padding-top: 80px;
   }
    
 
  </style>
 </head>
 <body>
  <p>上面是缩小的背景图片</p>
  <p>原始图片：<img src="p.jpg"></p>
 </body>
</html>

2.通过resize属性来改变输入框的大小

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  
   <style type="text/css">
    div{
     border: 2px solid;
     padding: 10px 40px;
     width: 300px;
     resize: both;
     overflow: auto;
    }
   </style>
 </head>
 <body>
  <div>you in<img src="p.jpg"> 
  resize属性规定是否调整元素尺寸
  </div>
 </body>
</html>

3.边框阴影

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  
 <style type="text/css">
  .shadow{
   //box-shadow: 0 0 30px 10px;
   //box-shadow: 10px 10px 30px 10px;
   //box-shadow: 0 0 0 10px;
   box-shadow: 0 0 100px;
   height: 100px;
   width: 100px;
   margin: 30px;
   float: left;
  } 
   .shadow_inset{
    //box-shadow: 0 0 30px 10px inset;
    //box-shadow: 10px 10px 30px 10px inset;
    //box-shadow: 0 0 0 10px inset;
    box-shadow: 0 0 100px inset;
    height: 100px;
    width: 100px;
    margin: 30px;
    float: left;
   }
   </style>
 </head>
 <body>
  <div class="shadow">1</div>
  <div class="shadow_inset">2</div>
 </body>
</html>

4.边框

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>边框</title>
  
  <style type="text/css">
   .round1{
    height: 200px;
    width: 200px;
    border: 1px solid;
    border-radius: 100%;
    margin: 20px 0 0 30px;
    float: left;
   }
   .round2{
    height: 120px;
    width: 240px;
    border: 1px solid;
    border-radius: 20%;
    margin: 20px 0 0 30px;
    float: left;
       }
  </style>> 
 </head>
 <body>
  <div class="round1">1</div>
  <div class="round2">2</div>
 </body>
</html>

5.圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css边框和背景</title>
    <link rel="stylesheet" type="text/css" href="cssbor.css"/>
</head>
<body>
<div id="b1">css</div>
<div id="b2">css</div>
<div id="b3">css</div>
<div id="b4">css</div>
</body>
</html>

div{
    width: 200px;
    height: 100px;
    border: #ff3366 1px solid;
    float: left;
    margin: 10px;

}
#b1{ border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;}
#b2{ border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;}
#b3{ border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;}
#b4{ border-radius: 50px}
body{
   padding: 100px;
}