CSS

css样式层叠规则详解

CSS样式规则语法样式是CSS的基本单位,每个样式规则都是由选择器和声明块两个基本部分组成的。 选择器(selector)决定为哪些元素应用样式; 声明块定义相应的样式,它包含在一对花括号内,有一条或多条声明组成,而每一条声明则由一个属性和一个值组成,中间用冒号隔开。 语法: 属性名1: 属性值1; 属性名2: 属性值2; 属性名3: 属性值3; 1.找到应用给每个元素和属性的所有声明 浏览器在 ... »

CSS3对图片照片进行边缘模糊处理的实现

使用CSS3的新特性实现各种图片边缘的模糊效果。 1. 在图片标签外部套一层DIV标签: <div class="img-edge-cover"> <img src="photo.png" alt="photo"> </div> 2. 为外层DIV添加一圈向内的 边缘阴影 ,也是css3的新特征 box... »

CSS3实现文字浮雕效果,镂刻效果,火焰文字

要做出这个效果,首先必须知道css的一个属性: text-shadow:水平位置 垂直距离 模糊距离 阴影颜色; 水平位置和垂直位置的值可以为负值 可以使用两组值来实现凹凸效果,中间用逗号“,”隔开 CSS3实现文字浮雕效果,镂刻效果,火焰文字 <style> body{ background: #ccc; } div{ font-size: 80px; col... »

详解如何使用image-set适配移动端高清屏图片

当然其实你也可以根据dpi细致得去匹配机型,image-set支持根据dpi范围去匹配。 »

解决移动端1px边框问题的几种方法(5种)

本文介绍了解决移动端1px边框问题的5种方法。当然了,在这之前先整理了与这些方法相关的知识:物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的。在PC端,CSS的... »

微信小程序实现可实时改变转速的css3旋转动画实例代码

前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。实现可以实时修改转速微信小程序里涉及到实时数据就避免不了Page.data这个东西。答案是肯定的,但是不是去把动画时间改为0,而是采用了css3动画的一个属性。 »

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。 栗子1:从最简单的水平居中开始 margin: 0 auto; 块级元素使用margin: 0 auto;可以在父元素的中间位置居中,不过要记得设置块级元素的宽高。 HTML部分 <div class="wrap&q... »

快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)

问题解说: 在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示   //html <div class="container"> <div class="first"> </div> </div> //les... »

CSS中元素的显示模式

在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素、块级元素。2.1,行内元素不会独占一行,而块级元素会独占一行;2.2,行内元素不能设置宽度和高度,它的宽度和高度会随着文本的改变而该改变。4,如何转换CSS元素的显示模式? »

css3 transform导致子元素固定定位变成绝对定位的方法

 本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法,分享给大家,也给我自己留个笔记,方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 } .parent { position: fixed; width: 300px... »

CSS3标注引用的出处和来源的方法

疫情呆家里都快发霉了,打开电脑动动大脑,今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。 新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及,越来越多的新方法能让我们简洁又轻松的解决以前用很复杂的代码才能完成的事情。比如HTML5中的download和placeholder,CSS3中的计算器和计数器,都使我们Web开发人员的工作量大大降低,因为这些功能的出现使... »

css实现多张图片横向居中显示的方法

先讲一下实现的步骤: 最终效果 2. 代码实现 HTML部分 <div class="main"> <div class="tag"> 分类小贴士 </div> <div class="images" > <div class="mid"> <img s... »

面试官提问之CSS如何实现固定宽高比

如果有一天你被问到:“你能说一下如何实现一个固定宽高比的元素吗?所以本文主要分为可替换元素和普通元素如何实现固定宽高比。显然,这并不灵活,那我们该如何针对普通元素实现固定宽高比呢。这样是实现了固定宽高比,但其 只是一个徒有其表的空盒子,里面没有内容。W3C 的 CSS 工作组为了避免这一问题,已经在致力于实现这样一个属性 aspect-ratio 。 »

CSS3颜色值RGBA与渐变色使用介绍

CSS3之前渐变色图片只能用背景图片CSS3的渐变色语法可以让我们省去下载图片的开销并且在改变浏览器分辨率时有更好的效果颜色值RGBA我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色取值0~255,或0~100%rgba就是在rgb基础上增加了alpha不透明度参数例子1、正常的红色rgb颜色.demo »

CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现

例子:ul.noneul.circle ul.square ol.upper-roman ol.lower-alpha {list-style-type:lowe »

CSS 实现蜂巢/六边形图集的示例代码

不知道为什么,UI 很喜欢设计蜂巢效果(摊手)  一、实现六边形 首先用传统的方式来分析一下六边形 可以拆分成三个矩形,每个矩形 旋转正负 60° 得到其它两个矩形 由此可以设计出基本的 HTML 结构 矩形的宽高先随便设置,后面组件化的时候再计算其关系,通过 props 设置 然后设置 CSS 样式 .w-comb { background-color: #e4e4e4; di... »

css浮动 float属性详解

css浮动 float属性详解

一、什么是浮动? 浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。 二、如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动,并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 三、浮动有什么作用? 作用:在html文档流中,分为... »

js判断并告知支持css属性(值)的 情况分析

当我们想用某个css新特性时,总是会在意它的兼容性情况,或许我们会去搜索它的兼容性,哪些浏览器合适哪些不合适,在这些已知的情况下再选择是不是使用或如何使用,这是一个已知我们即将用于什么浏览器下作出的选择。 但我们往往不知道自己开发的页面用户会在哪个浏览器上进行打开,这时我们需要根据实际使用浏览器情况来判断采用何策略。这时就需要用js来判断,我们要使用css属性能否起效。 css属性的兼容性,是有两... »

CSS的background属性及CSS3的背景图片设置总结

在css中,共有如下几个background属性 属性 描述 CSS background 在一个声明中设置所有的背景属性。1 background-repeat ... »

CSS实现QQ浏览器功能

代码知识点1.结合fullpage.js实现全屏滚动2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。color-stop1, color-stop2,… 用于指定渐变的起止颜色。所有动画在1.5S内完成,实现落空效果。运行效果总结到此这篇关于CSS实现QQ浏览器功能的文章就介绍到这了,更多相关css ... »

CSS3中的常用选择器使用示例整理

1. 根选择器 :root:root{}就等同于html{}, 一般来说, 推荐使用:root{}. CSS Code复制内容到剪贴板 <style>    :root {      background:green;    }    </style>  ... »

border-radius给元素添加圆角边框的方法

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只... »

CSS属性text-overflow的使用问题

text-overflow:clip | ellipsis这个属性使用必须通过几个属性一块才能使用1,overflow:hidden;这个属性是内容区装不下内容应该怎么办。不然裁剪之后还是显示溢出就想日狗了试了下visible. 那text-overflow就不管用了。不用的话text-overflow不知道从哪里开始截断。我自己是这么理解的;以上这篇CSS属性text-overflow的使用问题... »

css实现两列固定与一列自适应的几种方法

本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下: 1.flex布局 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。这里我们利用flex布局来实现两列固定一... »

SCSS移动端页面遮罩层效果的实现及常见问题解决

实例可以兼容安卓4.0.4+: 设计结构如下: XML/HTML Code复制内容到剪贴板 <header class="header"></header>   <div class="wrap-page">       &... »

Page 1 of 214123»