美文网首页
css3-背景相关样式

css3-背景相关样式

作者: AssertDo | 来源:发表于2019-08-26 17:19 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*提升移动端响应区域的大小*/
        a{
            width: 50px;
            height: 50px;
            display: block;
            background-color: #ddd;
            margin:100px auto;
            box-sizing: border-box;
            
            background-image: url("../images/sprites.png");
            /*设置背景偏移,参照background-origin原点,这个原点默认在容器的左上角*/
            background-position: -20px 0;

            /*添加padding*/
            padding:14px;
            /*设置背景坐标的原点
            border-box:从border的位置开始填充背景,会与border重叠
            padding-box:从padding的位置开始填充背景,会与padding重叠
            content-box:从内容的位置开始填充背景*/
            background-origin: content-box;
            /*设置内容的裁切:设置的是裁切,控制的是显示
            border-box:其实是显示border及以内的内容
            padding-box:其实是显示padding及以内的内容
            content-box:其实是显示content及以内的内容*/
            background-clip: content-box;
        }
    </style>
</head>
<body>
<a href=""></a>
</body>
</html>

相关文章

  • css3-背景相关样式

  • css3-文字与字体相关样式

    text-shadow属性-给文字添加阴影 1.text-shadow属性的使用方法 给页面上的文字添加阴影效果 ...

  • css3-盒相关样式-盒模型(1)

    盒的类型 1.基本类型 block、inline、inline-blockinline-block特点:1.只能设...

  • 背景简写、表格、框架集

    背景简写 background:通过该属性可以同时设置所有背景相关的样式,没有顺序要求,没有数量要求,不写的样式就...

  • 表格 框架

    背景简写 background:通过该属性可以同时设置所有背景相关的样式,没有顺序要求,没有数量要求,不写的样式就...

  • 表格与框架

    背景简写 background:通过该属性可以同时设置所有背景相关的样式,没有顺序要求,没有数量要求,不写的样式就...

  • CSS3-背景

    复合属性 background 复合属性书写顺序不限,没被设置的值认为是默认值,需要做兼容的属性也可以在之后单独设...

  • --- > css3-背景

    背景(background) 在CSS3之前我们对背景图片的控制极为有限,只能决定其来源、位置、重复,CSS3开辟...

  • CSS3简明教程之与背景相关的样式

    第5章 与背景相关的样式 background-origin background-origin设置元素背景图片的...

  • CSS 样式介绍(二)

    各种样式属性的作用 1.文字相关的样式属性 2.块级元素、行内元素、行内块元素 3.背景样式属性 4.css3样式...

网友评论

      本文标题:css3-背景相关样式

      本文链接:https://www.haomeiwen.com/subject/kwydectx.html