Css3使用技巧有哪些


这篇文章主要为大家展示了“Css3使用技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css3使用技巧有哪些”这篇文章吧。经典的css3实例本文会提到以下几个css3的属性:border-radius::afterattrcontentbox-sizinglinear-gradientradial-gradientbox-shadowborder-radius相信这个属性,写过css的同学都知道,用来产生圆角,比如画一个圆形:div { width:100px; height:100px; background:red; border-radius:100px; //border-radius:100%;}然后我们来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画一个半圆div { width: 100px; height: 50px; background: red; border-radius: 50px 50px 0 0;}那如果要画一个椭圆该怎么办呢?你会发现上面的语法貌似做不到了,其实border-radius的值还有一种语法: x半径/y半径:div { width: 100px; height: 50px; background: red; border-radius: 50px/25px;}如果我要画半个椭圆,又要咋办呢?div { width: 100px; height: 50px; background: red; border-radius: 100% 0 0 100% /50%;}::after这里拿个简单的例子来看,我们要画一个放大镜,如下图:分析一下,这个放大镜可以由两个div组成,一个是黑色的圆环,一个是黑色把手(旋转45度)。所以我们就需要用两个div来实现吗?答案是NO,一个div也是可以的,我们可以借助::after来添加一个元素。同理如果需要三个div,我们还可以使用::before再添加一个元素。下面看一下代码:div { width: 50px; height: 50px; border-radius: 50%; border: 5px solid #333; position: relative;}div::after { content: ”; display: block; width: 8px; height: 60px; border-radius: 5px; background: #333; position: absolute; right: -22px; top: 38px; transform: rotate(-45deg);}attrcontent比如我们要实现一个悬浮提示的功能。传统方法,使用title属性就能实现,但是现在我们要更美观,可以使用css3提供的attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。假如我们的html代码如下:

hello…

我们来看看实现这个插件的css代码:div { position: relative;}div:hover::after { content: attr(data-title); //取到data-title属性的值 display: inline-block; padding: 10px 14px; border: 1px solid #ddd; border-radius: 5px; position: absolute; top: -50px; left: -30px;}hover的时候,在元素尾部添加一个内容为data-title属性值的元素,所以就实现了hover显示的效果,如下图所示:box-sizing我们知道,在标准盒子模型中,元素的总宽=content + padding + border + margin css中的盒子模型大家可能都知道,但是这个盒子模型的属性可能没有那么多人知道,box-sizing属性就是用来重定义这个计算方式的,它有三个取值,分别是:content-box(默认)、border-boxpadding-box一般来说,假如我们需要有一个占宽200pxpadding10pxborder5pxdiv,经过计算,要这么定义样式。div { width: 170px; //这里的宽度要使用200-10*2-5*2 = 170得到。 height: 50px; padding: 10px; border: 5px solid red;}然后我们来使用一下box-sizing属性。div { box-sizing: border-box; width: 200px; //这里的宽度就是元素所占总宽度,不需要计算 height: 50px; padding: 10px; border: 5px solid red;}linear-gradient做活动页面的时候我们经常会遇到这样的需求:顶部的中间一张大banner图片,然后整个区域的背景色要根据图片背景色渐变。就可以使用这个属性了。div { width: 200px; height: 50px; background: linear-gradient(to right, red, yellow, black, green);}是不是很有趣?其实,linear-gradient还有更多有趣的功能,你可以根据下面的动图去感受一下:你以为这就完了?等等,还有免费云主机域名更强大的呢!repeating-linear-gradient,来感受一下:linear-gradient还有更加强大的功能,比如它可以给元素添加多个渐变,从而达到更NB的效果。radial-gradient上面的linear-gradient是线性渐变,这个属性是径向渐变。下面的代码实现了一个chromelogodiv.chrome { width: 180px; height: 180px; border-radius: 50%; box-shadow: 0 0 4px #999, 0 0 2px #ddd inset; background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%), radial-gradient(circle, #fff 33%, transparent 33%), linear-gradient(-50deg, #FFEB3B 34%, transparent 34%), linear-gradient(60deg, #4CAF50 33%, transparent 33%), linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%), linear-gradient(-120deg, #FFEB3B 40%, transparent 40%), linear-gradient(-60deg, #FFEB3B 30%, transparent 30%), linear-gradient(0deg, #4CAF50 45%, transparent 45%), linear-gradient(60deg, #4CAF50 30%, transparent 30%), linear-gradient(120deg, #F44336 50%, transparent 50%), linear-gradient(180deg, #F44336 30%, transparent 30%);}实现原理就是使用了多个渐变色放在div上,友协被遮住,视觉上就产生了想要的效果,是不是很强大!看了下图你就知道其实就是在div上加了很多个渐变。以上是“Css3使用技巧有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注百云主机行业资讯频道!

相关推荐: 怎么用html+css+jquery做选项卡

本篇内容主要讲解“怎么用html+css+jquery做选项卡”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用html+css+jquery做选项卡”吧!   -//W3C//DTDXHTML1.0Transi…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 10/14 20:02
下一篇 10/14 20:02

相关推荐