CSS高级用法

最新推荐文章于 2024-05-10 04:14:55 发布
最新推荐文章于 2024-05-10 04:14:55 发布
阅读量433 收藏
点赞数 1

收藏一些css的高级用法：

1、黑白图像

这段代码会让你的彩色照片显示为黑白照片

1
2
3
4
5
6
7

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}


2、使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

1
2
3
4

/* add border */
.nav li {
  border-right: 1px solid #666;
}

……然后再除去最后一个元素……

1
2
3
4

// remove border /
.nav li:last-child {
  border-right: none;
}

……可以直接使用 :not() 伪类来应用元素：

1
2
3

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

这样代码就干净，易读，易于理解了。

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

1
2
3

.nav li:first-child ~ li {
  border-left: 1px solid #666;
}

3、页面顶部阴影

下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：

1
2
3
4
5
6
7
8
9
10
11
12

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}

4、逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

1
2
3

ul > li:not(:last-child)::after {
  content: ",";
}

5、优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

1
2
3
4
5

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

6、CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

1
2
3
4
5
6
7
8
9
10

/* basic calc */
.simpleBlock {
  width: calc(100% - 100px);
}
/* calc in calc */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

7、文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

1
2
3
4
5
6
7
8
9
10
11

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

8、禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

1

.disabled { pointer-events: none; }

9、文本模糊

简单但很漂亮的文本模糊效果，简单又好看！

1
2
3
4

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

10、DIV可编辑，就是让一个div变成一个类似input输入框的效果。

在div中添加contentEditable=”true”属性就可以了，如下：

1
2
3
4
5

<div id="div1" contentEditable="true"  ></div>  

<div id="div2" contentEditable="true" ></div>  

 <div contentEditable="true"  id="div3"></div>

其中，我后面有篇编辑器的文章 http://www.haorooms.com/post/js_guangbiao 就用到了这个功能！这个是获得iframe光标所在位置的父节点名称，iframe中就用到了contentEditable=”true” 属性

11、有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性：

1

unselectable="on" onselectstart="return false;"

具体代码：

1
2
3

<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>

这样，div里面的东西就不能选择复制了！

12、CSS 中form表单两端对齐

做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.test1 {
            text-align:justify;
            text-justify:distribute-all-lines;/*ie6-8*/
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
            .test1:after{
                content:".";
                display: inline-block;
                width:100%;
                overflow:hidden;
                height:0;
            }
        }

html代码：

1
2
3
4
5
6
7

<div class="box1">
    <div class="test1">姓 名</div>
    <div class="test1">姓 名 姓 名</div>
    <div class="test1">姓 名 名</div>
    <div class="test1">所 在 地</div>
    <div class="test1">工 作 单 位</div>
</div>

13、input声音录入按钮，（紧支持谷歌）效果如下图：

如下图红色框框中的按钮
“图片描述”
代码如下：

1

<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词"  x-webkit-speech>

添加 x-webkit-speech 属性就可以了。

14、给input的placeholder设置颜色

设置方法如下：

1
2
3
4
5
6
7
8
9
10
11
12

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

15、css input[type=file] 样式美化，input上传按钮美化

思路：input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。
代码如下：
DOM结构：

1
2
3
4
5
6
7

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件
</a>

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="">
</a>

CSS样式1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

CSS样式2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

修改后如下：
“图片描述”
备注：对于HTML5之input:file，还可以控制上传的类型的，但是这个是html5的，低版本浏览器不支持

16、超出长度显示省略号

单行文本显示…
一般要指定宽度，然后给如下四个属性。

1
2
3
4

display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

案例代码：

1
2
3
4
5
6
7

.demo{
  width:200px;  /指定宽度/ 
  display:bolck;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

多行文本显示…
主要属性-webkit-line-clamp

1
2
3
4
5
6
7

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
   // background:url(和网页背景颜色一样的一张背景图) repeat-y;
  background-color:#fff;
}

注意：

1
2
3
4

height高度正好是line-height的3倍；
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
要支持IE8，需要将::after替换成:after；

17、CSS强制换行和不换行

自动换行

1
2
3
4

div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制英文单词断行

1
2
3

div{
word-break:break-all;
}

强制不换行

1
2
3

div{
white-space:nowrap;
}

18、渐变效果

默认渐变是从上往下代码如下：

1
2
3
4
5

background:#ed4a60; 
background: -webkit-linear-gradient(#ed5a5e, #ed3a61);
background: -o-linear-gradient(#ed5a5e, #ed3a61); 
 background: -moz-linear-gradient(#ed5a5e, #ed3a61); 
background: linear-gradient(#ed5a5e, #ed3a61);

前面加一个参数，right,left,bottom,top等，就可以指定渐变方向：

1
2
3
4

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

还可以从左上角开始渐变left top，right top(右上角)以此类推，代码如下：

1
2
3

background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);

另外还可以指定渐变角度，这个角度是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。
代码如下：

1
2
3
4
5
6
7
8
9
10
11

background: -moz-linear-gradient(<angle>, #ace, #f96);
background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));//老的写法
background: -webkit-linear-gradient(<angle>, #ace, #f96);
background: -o-linear-gradient(<angle>, #ace, #f96);

.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);
}

农民工-涯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 的十个高级使用技巧
GoldenaArcher的博客
04-28 710
CSS 的十个高级使用技巧 总共 10 个案例，分别为： 精灵图 字体图标 鼠标样式的改变 输入框边框(outline)的调整 行内块的垂直居中 图片底部空白缝隙的处理 溢出的文字用省略号代替 布局技巧 三角形小技巧 CSS 初始化 案例 1，精灵图 这个案例之前在 JavaScript 事件操作案例学习 中写过了，主要还是依靠使用 background-position 调整 x 轴和 y 轴的值，从而从精灵图中拉取到正确的图片进行渲染。 效果图： 原图： 代码： <!DOCTYPE h
CSS学习教程之高阶篇
cug-jdc的博客
07-14 1318
CSS学习教程之终极篇高阶学习CSS Display(显示)CSS Position(定位)CSS OverflowCSS Float（浮动）CSS 对齐CSS 组合选择符CSS 伪类CSS 伪元素CSS 导航栏CSS 下拉菜单CSS 提示工具CSS 图片廊CSS 图像透明/不透明CSS 媒体类型 高阶学习 CSS Display(显示) display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 隐藏元素 - display:none或visibility:hidde
2024年最全【玩转CSS】这些高级技巧，你都会吗(1)，2024年最新大数据开发开发面试书籍推荐
最新发布
2401_84615484的博客
05-10 946
所谓的界面样式，就是更改一些用户操作样式，以便提供更好的用户体验更改用户的鼠标样式表单轮廓防止表单域拖拽。
css高级用法
liangmaxmin的博客
05-09 384
css 三个流 1.基本流 2.浮动流 3.定位 position（定位） 1.static 静态定位 2.fixed 固定定位 3.absolute 绝对定位 4.relactive 相对定位 定位 = 定位模式+边偏移 注意： 凡是有定位的地方必定有边位移 ...
【CSS3高级应用】
橙子的博客
04-30 876
CSS3高级应用一、页面中的多媒体嵌入二、CSS3中过渡效果一级目录 一、页面中的多媒体嵌入 网页除了可以放置图片和文字，还可以放置音频和视频。 1、视频： 标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示内部的子元素。 (1)视频格式 <video src=“视频文件名” controls muted autoplay loop><p>你的浏览器不支持此视频格式<p></video> .mp4：mpe
CSS高级技巧 (黑马程序员)
2301_80068547的博客
11-26 1013
所谓的界面样式，就是更改一些用户操作样式，以便提升用户的体验鼠标样式表单轮廓防止表单域拖拽。
css高级应用与技巧
03-22
css高级应用与技巧css高级应用与技巧css高级应用与技巧
css高级应用
08-20
css高级应用，css难点，css各种菜单,chm格式文件
CSS3高级应用
04-09
CSS3高级应用
CSS样式的高级应用
07-17
在CSS样式的高级应用中，我们探讨了一些关键概念和技术，这些技术可以帮助开发者创建更美观、功能丰富的网页。以下是一些核心知识点的详细说明： 20.1 列表 列表在网页布局中扮演着重要角色，可以用于组织信息。CSS...
条件CSS的高级用法
01-19
条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣，而是对用户浏览器使用的渲染引擎更感兴趣。这就是条件(Conditional-CSS)使用 ‘Geckko’ 而非...相关教程：针对不同版本的IE浏览器的条件CSS应用 条件CSS
css3高级选择器使用方法
09-25
2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。今天就介绍css3选择器的使用方法
CSS的高级使用技巧和和应用
06-08
CSS的高级使用技巧和和应用；还有一些CSS和XHTML的代码规范与注意事项。
css高级语法
tane_e的博客
08-02 247
1.选择器分组 被分组的选择器可以拥有相同的声明，即不同的标签可以同时拥有相同的样式。
经常使用的20个css高级技巧（上）
成熟的小孩的博客
12-15 4907
1. 黑白图像 这段代码会让你的彩色照片显示黑白照片。img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: graysca
css高级用法-持续更新
weixin_45529161的博客
07-01 102
css css总是不经意间给人惊喜，不能保证每一条css语言都被熟知和记住，所以记录一下 1.计算属性 calc(100vh - 20px) 2.中断 break-before: always; break-inside: avoid 3.文字过长省略号…
CSS高级常用应用技巧汇总
qq_40665861的博客
03-16 198
1.单行和多行文本超出省略号 <div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契;懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能
CSS定位高级语法
StruggleofDog的博客
02-23 288
推荐的定位放式的优先级 优先级最高：ID 优先级其次：name 优先级再次：CSS selector 优先级再次：Xpath 针对css selector和xpath的优先级做一个简单的说明 在项目中我们可能用的最多的是css或者xpath，那么针对这两种，我们优先选择css，原因为： 1、css是配合html来工作，它实现的原理是匹配对象的原理，而xpath是配合xml工作的，它实现的原理是遍历的原理，所以两者在设计上，css性能更优秀 2、语言简洁，明了，相对xpath 3、前端开发主要是css，不使用
CSS 高级语法
06-01 83
 选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } 继承及其问题 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则： body {
css高级应用导航栏平滑过渡
05-25
导航栏平滑过渡可以通过CSS3的transition属性来实现。具体步骤如下： 1. 定义导航栏的样式 ``` .nav { display: flex; justify-content: space-between; align-items: center; background-color: #333; color: #fff; padding: 10px 20px; transition: all 0.3s ease-in-out; } ``` 在这个例子中，我们使用了 `transition: all 0.3s ease-in-out;` 来定义导航栏的过渡效果，其中 `all` 表示所有属性都会有过渡效果， `0.3s` 表示过渡的时间为0.3秒， `ease-in-out` 表示过渡效果为先加速再减速。 2. 定义导航栏的鼠标悬停状态 ``` .nav:hover { background-color: #555; } ``` 在鼠标悬停状态下，我们可以通过修改导航栏的背景颜色来实现过渡效果。 这样，当鼠标悬停在导航栏上时，导航栏的背景颜色会平滑地从原来的颜色过渡到新的颜色，提供更加流畅的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值