css
-
使用CSS如何绘制五角星?(附代码)



下面本篇文章给大家介绍一下如何使用纯CSS绘制五角星、六角形、五边形、六边形、心形。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 1、五角星 #star-five { margin: 50px 0; position: relative; display: block; colo…
-
你一定要知道的css属性值规范
1、如果值是0,通常都不用带单位 例如: .list{ border: 1px solid 0px; margin: 0px;} 改成: .list{ border: 1px solid 0; margin: 0;} 但是有个特例,就是和时间有关的时间单位都要带上秒s,如下两个都是不合法的: tra…
-
纯css实现加号“+”效果(代码示例)



本篇文章来给大家通过代码示例介绍一下使用纯css实现加号“+”效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 实现下图的加号效果: 若想实现这个效果, 只需一个div元素即可搞定。 立即学习“前端免费学习笔记(深入)”; 需要用到css的为了before和after, …
-
为什么不建议使用@import引入css
不建议使用@import主要有以下两点原因: 原因一、使用@import引入CSS会影响浏览器的并行下载 使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作…
-
CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL(Domain Specific Language),来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性…
-
CSS 中伪类的使用(干货)



css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…
-
使用CSS实现皮卡丘



前言 当我学完css和js后,冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材,最终选择了皮卡丘,如下图。 准备工作 在开始写皮卡丘之前,我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网页那样从左到右布局,而是要从中间布局,因为左右两边对称。理清…
-
如何使用css来控制页面



使用css对页面进行全方位的控制,主要的方法有四种:行内样式、内嵌式、链接式和导入式,下面我们来分别看一下这四种方式: 一、行内样式 1、特点:最为直接的一种。 2、使用方式 直接在HTML的标记中,使用style属性,将CSS代码写在其中。 立即学习“前端免费学习笔记(深入)”; 3、举例说明 页…
-
利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现 具体代码: .mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */}.mirrorRotateVertical { transform: rotat…
-
css中实现背景透明的三种方式
css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,2…