CSS技巧精粹-CSDN博客

本文链接：https://blog.csdn.net/Archer1724/article/details/102941432

文章目录

做网页时，注重每一个小细节，精益求精。

1. 设置一个元素的边框和轮廓

当在制作网页的时候，有时默认存在的边框线，点击元素浏览器会出现轮廓是很不美观的。
比如说显示一个button：
在这里插入图片描述
只需要这样写：

 input[type="button"]{
           border:none;
           outline:none;
        }

在这里插入图片描述

2. 使用标签的次序

在使用标签的时候，为了更加规范，先使用语义化的。

比如说：<h3> <a> <img> <label> …

再用<div> <span> <strong> 。。。
当有多层嵌套时，比如说二级菜单。可以任意使用列表标签<ul > <ol> < dl>， < dl>里有< dd>< dt>（首选）

网站优化，一般三层嵌套为最佳。

3. 设置margin 值

当想给两个框设置Margin（间距）时，别忘了先浮动它们。
浏览器默认是有距离的。

4. box-shadow (阴影)

box-shadow:10px 10px 5px #f00;

box-shadow :h-shadow v-shadow blur spread color inset;

h-shadow（水平阴影位置，必需，允许负值）
v-shadow（水平阴影位置，必需，允许负值）
blur（模糊距离，可选）
spread （阴影大小，可选）
color（阴影颜色，可选）
inset（从外侧的阴影改变阴影内侧阴影）;

继续使用前面button的例子：
在这里插入图片描述

5. 设置框中溢出的文字为省略号

在固定宽高的框中添加的文字过多，溢出后如下设置：

overflow:hidden;
text-overflow:eclipse;
/*省略号*/
white-space:nowarp;

我们来看看效果，比如说京东官网页面：
在这里插入图片描述

6. 渐变（Gradients）

（1）线性渐变（linear-gradient）

/*::选择器;      :和::都是一样的，在css3之后是：：*/
 div::after
        {
            content:"hello";
            /*和这句话起作用，必须有，可以""*/
            height:50px;
            width:200px;
            position:absolute;
            /*如果是relative,不显示效果的*/
            top:50px;
            background:linear-gradient(90deg,turquoise,#e40015,yellow);
        }
}

deg是指方向，将方向按90deg,180deg,270deg,360deg设置，效果如下：
在这里插入图片描述

我们可以看到图片是顺时针旋转的。

可以改变属性值，调出合适的渐近线。
ctrl+F 快捷键搜索

7. 雪碧图

在这里插入图片描述
雪碧图（CSS sprite）：将很多小图标放在一张照片上，按需通过定位来使用。可解决资源问题，方便且占内存小。

上面的图要如下使用:

这样写就好：

.i1{
    background: url("images/css-sprite.png") no-repeat left top;
}
.i2{
    background: url("images/css-sprite.png") no-repeat -20px top;
    /*把图整体往左移动*/
    /*雪碧图*/
}
.i3{
    background: url("images/css-sprite.png") no-repeat -40px top;
}
.i4{
    background: url("images/css-sprite.png") no-repeat left -16px;
}
.i5{
    background: url("images/css-sprite.png") no-repeat -20px -15px;
}