[CSS]《CSS揭秘》第二章——背景与边框

elina 发布于2019-08-30 15:53 / 563人阅读

摘要：半透明边框相关语法多重边框方案需要注意的是，上面所创建的边框是伪边框，并不响应鼠标事件。方案以左上角为基准。图像边框连续的图像边框属性规定背景的绘制区域。

半透明边框

    border:10px solid hsla(0,0%,100%,.5);
    background: white;
    background-clip: padding-box;

相关语法：

    background-clip: border-box|padding-box|content-box;

多重边框 box-shadow方案

    box-shadow: 0 0 0 10px red,
                0 0 0 15px green,
                0 2px 5px 20px white;

*：需要注意的是，上面所创建的边框是伪边框，并不响应鼠标事件。

outline方案（仅可创建双重边框）

    border: 5px solid red;
    outline: 10px solid green;

背景定位 background-position方案

    background: url(2.jpg) no-repeat;
    width: 100%;
    height: 100%;
    background-position: right 10px bottom 10px;

*：只有background-image时，需要设置基础大小，不然不会显示，因为背景图片不会撑开div。

background-origin方案

background-position默认是以padding-box为准，通过background-origin可以设置为content-box。

calc方案

background: url(2.jpg) no-repeat;
background-position: calc(100% - 10px) calc(100% - 10px);

*：calc以左上角为基准。
**：calc里的加减运算负前后必须有空格，这是为了向前兼容。

边框内圆角

    color: white;
    background:black;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em red;
    outline: .6em solid red;

条纹背景 水平条纹

background:linear-gradient(gray 30%,pink 70%);//渐变
background:linear-gradient(gray 30%,pink 30%);//不渐变

*：如果我们把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值。

垂直条纹（重复）

    background:linear-gradient(90deg,red 50%,blue 0);
    background-size:  50% 100%;

斜向条纹

background:repeating-linear-gradient(60deg,#fb3 0px,#fb3 15px,#58a 15px,#58a 30px);//角度，条纹1的渐变颜色1 起点，条纹1的渐变颜色2 终点，条纹2的渐变颜色1 起点，条纹2的渐变颜色2 终点；

同色系条纹

    background:#58a;
    background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1),15px,transparent 0,transparent 30px);

复杂的背景图案 网格

    background:#58a;
    background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
    background-size: 30px 30px;

波点

    background:#655;
    background:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);;
    background-size: 30px 30px;
    background-position: 0 0 ,15px 15px;

*：为了达到效果，第二层的偏移量必须为贴片宽度的一半。

图像边框 连续的图像边框

    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white,white),url(./2.jpg);
    background-size: cover;
    background-clip: padding-box,border-box;
    background-origin: border-box;

*：background-clip 属性规定背景的绘制区域。

复古信封

    padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg,red 0,red 1em,transparent 0,transparent 2em,#58a 0,#58a 3em,transparent 0,transparent 4em);

超融合服务器服务器托管 css与html html与css div与css php与css框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116791.html

css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
CSS揭秘之《灵活的背景定位》

摘要：针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧偏移，底部偏移有如下几种方式原理设置透明边框给指定值备注因为中属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字上面一针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧20px偏移，底部10px偏移有如下几种方式1、原理设置透明边框 div { ...

googollee 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《灵活的背景定位》

摘要：针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧偏移，底部偏移有如下几种方式原理设置透明边框给指定值备注因为中属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字上面一针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧20px偏移，底部10px偏移有如下几种方式1、原理设置透明边框 div { ...

Leck1e 2019-08-05 11:58 评论0 收藏0
CSS揭秘之《灵活的背景定位》

摘要：针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧偏移，底部偏移有如下几种方式原理设置透明边框给指定值备注因为中属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字上面一针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧20px偏移，底部10px偏移有如下几种方式1、原理设置透明边框 div { ...

RyanQ 2019-08-29 13:20 评论0 收藏0
《CSS揭秘》-背景与边框

摘要：给一个容器设置一层白色背景和一道半透明白色边框。思路实际是设置的背景会延伸到边框所在的区域的下层，可以通过属性调整背景的默认行为。优点边框样式十分灵活。缺点只适用于双层边框的场景边框不一定会贴合属性产生的圆角。 1.给一个容器设置一层白色背景和一道半透明白色边框。思路：实际是设置的背景会延伸到边框所在的区域的下层，可以通过background-clip属性调整背景的默认行为。 bac...

tangr206 2019-08-30 15:55 评论0 收藏0