HTML标签、属性五

米白蓝

已于 2022-03-15 18:48:20 修改

阅读量42

点赞数

分类专栏： HTML+css 文章标签： css html css3

于 2022-03-13 19:35:20 首次发布

本文链接：https://blog.csdn.net/qq_50563868/article/details/123464445

版权

HTML+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      border: 10px double #f00;
      padding: 20px;
      background-color: pink;
      background-image: url(./img/1.jpg);
      background-repeat: no-repeat;
      /* background-position: top right; */
      background-position: 20px 20px;
      background-clip: content-box;
      background-origin: padding-box;
      background-size: contain;
    }
    .box2 {
      width: 200px;
      height: 200px;
      background-image: linear-gradient(200deg, red, yellow, blue);
    }
    table {
      width: 50%;
      border: 1px solid #000;
      /* border-spacing: 0; */
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
      <td>D1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
      <td>D2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
      <td>D3</td>
    </tr>
  </table>
  <form action="./单位.html">
    用户名<input type="text" name="username">
    密码<input type="password" name="password">
    单选框：<input type="radio" value="a" checked>
    <input type="radio" value="b">
    复选框：<input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    提交<input type="submit" value="登录">
  </form>
</body>
</html>

背景

background-repeat：设置重复方式；repeat默认值；repeat-x沿着x轴重复；repeat-y沿着y轴方向重复；no-repeat不重复；
background-position：top、left、bottom、center，必须指定两个，也可以使用偏移量来设置；、
background-clip：背景裁剪；baoder-box默认，背景会显示在边框下；padding-box背景不会出现在边框，会出现在padding和内容区；content-box：只会出现在内容区；
background-origin：背景图片的偏移量的原点；padding-box：默认，backgroun-position从内边距处开始计算；content-box：从内容区计算；border-box：从边框处计算；
background-size：背景图片大小；设置一个值或者两个值；cover：图片比例不变，将元素铺平；contain：比例不变，图片在元素中完整显示；
background-attachment：背景图片是否跟随元素移动，scroll：默认，会跟随元素移动；fixed：背景会固定在页面中，不会移动；
简写属性：background：color image position/size repeat origin clip;
ctrl+f：强制清除缓存；
渐变颜色：background-image来设置：linear-gradient(方向，#111， #222)线性渐变，方向有to left，to right，to bottom，to top，也可以0-1turn，0-360deg；repeating-linear-gradient()线性重复渐变；redial-gradient(大小（可以是偏移量，circle，ellipse），位置（top，right……），颜色，颜色)径向渐变（默认正方形圆形，长方形椭圆形）；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签、属性五

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</titl
复制链接

扫一扫