css——background、border、margin、float、content、blur（图片模糊）、user-select：none(禁用用户选择复制），border-image

最新推荐文章于 2023-11-02 00:27:17 发布

肖ZE

最新推荐文章于 2023-11-02 00:27:17 发布

阅读量681

点赞数

CC 4.0 BY-SA版权

分类专栏： html 和 css

本文链接：https://blog.youkuaiyun.com/lucky541788/article/details/81627081

html 和 css 专栏收录该内容

43 篇文章

订阅专栏

本文深入讲解CSS中的背景图片设置、边框样式、外边距应用、浮动特性、内容生成及模糊效果等高级技巧，帮助读者掌握更复杂的网页布局与美化方法。

1、background

缩写形式：background：color image repeat 关联方式 position；

 /* img1在最上面，以此类推 */
 background: url(~@/assets/img1.png) no-repeat left top,
    url(~@/assets/img2.png) no-repeat right bottom,
    url(~@/assets/img3.png) no-repeat center center;
  background-size: auto, auto, cover;

可同时设置背景图片和颜色，且图片会覆盖颜色

background-attachment：关联方式

scroll（随滚动条动）
fixed（不随滚动条动）
local（类似scroll，但它的背景图片会跟随内容滚动）

background-repeat：设置背景平铺

repeat : 平铺 (默认)
no-repeat : 不平埔
round : 会将图片缩放后再平铺 (恰好占满 div)
space : 图片不会缩放,只会在图片之间产生相同的间距值 (恰好占满 div)

background-image：url（）选缓存小可循环的图片平铺优化性能

背景图片定位：background-position：水平垂直
（背景图片有定位属性，可以方便控制图片位置。而插入图片语义强，可被搜索引擎收录）

background-size：水平垂直；设置背景图片尺寸（可以像素或百分比）

auto（原始图片大小，默认）
cover（背景图片以等比放大填满父级）
contain（等比放大一个数值达到最大停止放大）

background-origin：属性规定 background-position 属性相对于什么位置来定位

padding-box（默认值，从padding的位置开始填充背景，会与padding重叠）
border-box（从border的位置开始填充背景，会与border重叠）
content-box（从content的位置开始填充背景，会与content重叠）；

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

padding-box（显示padding及以内的内容）
border-box（默认值，显示border及以内的内容）
content-box（显示content及以内的内容）；

2、border

缩写形式：border：1px solid #ccc；
边框型——border-style：
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

border-radio：设置圆角

3、margin

外边距margin：横向叠加，竖向合并
盒子水平居中：margin：0 auto；
大小盒子嵌套居中：margin-top时大小盒子一起改变可以大盒子加overflow：hidden（更好的是用padding）

4、float

无居中对齐，mg：0 auto；无效
仅可设置fl，fr
不区分block、inline-block、inline
无法撑起盒子高度，如果都float，可能使盒子消失
多盒子顶部对齐可用float
注：先f显示前面，后f显示后面；f位置取决于之前的标准流位置

清除float：

添加 <div style='clear:both'></div>

优点：通俗易懂
缺点：添加了无意义的标签，不利于后期维护

使用 br 标签自身属性 <br clear='all'>

优点：代码量少
缺点：同上，不推荐

父元素设置 overflow: hidden

优点：不存在结构语义化问题，代码量少
缺点：内容增多造成内容隐藏，无法显示溢出元素

父元素设置 overflow: auto

同上
早期 firefox 有兼容问题

使用 :after 伪元素

.clearfix {
	*zoom:1; //兼容IE
}

.clearfix::after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}

5、content

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

a:after {content: " (" attr(href) ")";} //在a标签后面插入a标签的链接

none 设置Content，如果指定成Nothing
normal 设置content，如果指定的话，正常，默认是"none"（该是nothing）
counter 设定计数器内容
attr(attribute) 设置Content作为选择器的属性之一。
string 设置Content到你指定的文本
open-quote 设置Content是开口引号
close-quote 设置Content是闭合引号
no-open-quote 如果指定，移除内容的开始引号
no-close-quote 如果指定，移除内容的闭合引号
url(url) 设置某种媒体（图像，声音，视频等内容）
inherit 指定的content属性的值，应该从父元素继承

6、blur

filter：blur（mpx）//m值越大图片越模糊

7、border-image

边框图片：

border-image-source：可以指定边框图片的路径，默认只是填充到容器的四个角点

border-image-slice：设置四个方向上的裁切距离，fill：做内容的内部填充

border-image-width：边框的宽度，默认是元素的原始边框宽度（注意：1、边框的图片本质是背景，并不会影响元素内容的放置； 2、内容只会受border和padding影响，所以它代替不了border的地位；建议：一般将值设置为原始的边框宽度）

border-image-outset：扩展边框范围，一般用的很少，因为会影响页面布局

border-image-repeat：平铺

stretch（默认值，拉伸）
repeat（直接平铺）
round（将内容缩放后进行完整的重复平铺）

缩写形式：border-image: source slice/width/outset repeat;

div {
            width: 200px;
            height: 200px;
            border: 30px solid;
            /*border-image-source: url('../images/logo.jpg');
            border-image-slice: 30 fill;
            border-image-width: 30px;
            border-image-outset: 0;
            border-image-repeat: round;*/
            border-image: url("../images/logo.jpg") 27/27px/0 round;
        }

border-image 可以用来做聊天框，不论里面文字多少，整体框都很自然，不会出现背景图片失真的问题

实例：

<style>
		div {
            margin-bottom: 20px;
            height: auto;
            border: 10px solid red;
            /*如果希望内容区域有纹理，可以设置border-image-repeat为repeat或round*/
            /*border-image-source: url("../images/tip.png");
            border-image-slice: 10 fill;
            border-image-width: 10px;*/
            border-image: url("../images/tip.png") 10 fill/27px;
        }

        div:nth-of-type(1) {
            width: 200px;
        }

        div:nth-of-type(2) {
            width: 500px;
        }
</style>

<body>
<div>
    啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！
</div>
<div>
    啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！啦啦啦，我是卖报的小行家，刮风下雨都不怕！
</div>
</body>

在这里插入图片描述