当前位置: 首页 > Web前端 > CSS

一些你可能不知道的css小知识

时间:2023-03-31 00:07:02 CSS

Css是一门功能强大、生态完整的复杂语言。它有很多技巧,但是我们在生活和工作中可能没有接触到它,包括一些实用的技巧。在这里,我特地罗列了一些CSS中可以忽略的小知识,希望对大家有所帮助。1、椭圆的实现与圆形相同。这里也用到了border-radius属性,但是你可能不知道border-radius是一个简写属性。border-radius可以分别设置四个角的水平和垂直半径,只要使用正斜杠即可。指定斜线前的前四个值作为各自的水平半径,指定斜线后的最后四个值作为各自的垂直半径(可以缩写)。因此,可以用如下代码实现一个椭圆:div{width:200px;高度:300px;边框:1px实心#000;边框半径:150px/100px;}

这样可以直接得到一个椭圆。其实它也支持百分比值,所以border-radius属性部分的代码也可以简化成这样:border-radius:50%;如果你只需要在上半部分实现一个半椭圆怎么办?从前面的结论来看,其实我们可以很容易的写出半椭圆的border-radius属性部分的CSS代码:border-radius:50%/100%100%00;这相当于:border-radius:50%50%50%50%/100%100%00;结果如下:2.绝对定位和固定定位元素可以通过同时设置bottom&top或者left&right的值来间接设置元素的宽度。代码如下:.parent{position:relative;边框:1px红色虚线;高度:100px;宽度:100px;}.child{位置:绝对;底部:10px;高度:10px;左:10px;右:10px;background:gray;
结果如下:其实就算父元素的宽高不一样直接指定,但有其内嵌内容支持的情况下,同样可以生效。3、一般情况下,固定定位的父元素无论层级设置多高,嵌入的子元素层级设置多低,该元素都不能用旧规则覆盖这些子元素。上面的代码示例:.父母{位置:固定;z-指数:999;背景:红色;高度:100px;宽度:100px;}.child{位置:相对;z-指数:-999;宽度:50px;高度:50px;background:gray;
老规矩,贴结果图:4.使用currentColorcurrentColor是一个特殊的属性,它是第一个CSS属性变量。顾名思义,它不绑定具体的颜色值,而是在使用中解析为颜色。比如下面的水平分割线的颜色值:div{color:red;border:1pxsolidred;}hr{height:.5em;background:currentColor;

MyFirstHeading


Myfirstparagraph.

结果如下,水平分割线成功赋值samecolorvalue:5.利用flexbox和margins实现垂直和水平居中实现元素垂直和水平居中的方法有很多,但下面是一个比较好的方法,很简单。只需将这两个属性分别添加到父类和子类中即可:.parent{display:flex;}.child{margin:auto;}可以实现子元素的垂直和水平居中。6、绝对定位元素在设置为内联元素时不会生效。很多人认为绝对定位的元素可以随意设置其显示属性。事实上,绝对定位的元素会形成一个块级框,不能设置为内联元素。元素。你可以在一个元素上同时设置以下样式来试试效果:div{display:inline;位置:绝对;宽度:200px;高度:200px;background:red;}你会发现给他设置的宽高还是会生效的。这就说明了问题。7、为了更好的实现文本两端对齐的效果,相信有人可能会在相应的样式类中设置如下属性:text-align:justify;但是这里效果不好,容易造成字间距过大影响阅读的现象。我们只要在相应的样式类中设置如下属性即可达到预期的效果:hyphens:auto;它会在末尾打断单词,从而大大缩短了单词之间过多的间距。8.实现波浪下划线我们将使用背景速记属性来实现它。你可以先尝试写如下代码:p{font-size:30px;显示:内联;背景:线性渐变(红色0100%)不重复;背景大小:100%1px;background-position:085%;

这是我的第一段。这是我的第一段。这是我的第一段。

你会看到如下结果:这不是我们想要的结果。首先,它通过字形的下降端。我们应该让下划线在遇到字母时自动断开,这样效果会更舒服。可以巧妙的使用text-shadow属性来实现这一步,在上面的样式类中加入这样一个属性段:text-shadow:2px0white,-2px0white;结果如下:可以看到效果变成了这样:如何实现类似于文本输入纠错的波浪下划线?这里需要两层渐变,最终代码如下:p{font-size:30px;显示:内联;背景:线性渐变(-45deg,透明40%,红色,红色60%,透明0)01em,线性渐变(45deg,透明40%,红色,红色60%,透明0).1em1em;背景重复:重复-x;背景大小:.2em.1em;text-shadow:2px0white,-2px0white;}实现的效果如下:附:部分内容来自LeaVerou的书《CSS揭秘》。原文链接【作者简介】TRIS,励志科技Web前端开发工程师,喜欢唱歌、看动漫、看小说。擅长微信小程序开发,系统管理后台。访问www.talkmnoney.cn了解更多信息。