51dev.com IT技术开发者社区

51dev.com 技术开发者社区

用CSS绘制实体三角形

用CSS绘制实体三角形

使用CSS盒模型中的border(边框)即可实现如下所示的三角形:.box{width:0;height:0;border-width:100px;border-style:solid;border-color:#FFCCCCtransparenttransparenttransparent;}请看...

css3之水波效果

css3之水波效果

这些效果可谓多种多样,当然用canvas、svg也都能实现奈何对这些有不熟悉(尴尬),不过咱们用css来写貌似也没想象中的那么难吧。 效果图 css.container{width:100px;height:100px;border-radius:50%;border:3pxso...

CSS中@support的用法 及其calc、media用法

CSS中@support的用法 及其calc、media用法

背景:一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc,support,media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来,看一看它的真面目。了解到了@support的这个属性,记录下:CSS中的@support主要是用于检测浏览...

CSS3中的px,em,rem,vh,vw

CSS3中的px,em,rem,vh,vw

1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端     em换算工具:http://www.runoob.com...

css等待特效

css等待特效

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>css等待特效</title></head><styletype="text/css">.loa...

css样式显示多个空格

css样式显示多个空格

遇到后台传回的字符串包含多个空格,但是在前台显示上则只会显示出一个空格的问题,相信大家都遇到过,那如何解决呢?很简单,在相应元素上添加一个css语句即可:white-space:pre;  ...

css之文本两端对齐的两种解决方法

css之文本两端对齐的两种解决方法

说起文本对齐,大家都知道text-align,最常用的有left、right、center,今天我们说一下justify,也就是文本两端对齐。说起来简单,但是有些小坑大家还是要注意的。现在我们有这样的两行文本,实际开发中我们经常会遇到这样的情景:需要把姓名和电话号码这两段文字对齐。我们自然会想到te...

CSS3伪类和伪元素的特性和区别

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比...

浅谈css3有意思的属性pointer-events: none;

浅谈css3有意思的属性pointer-events: none;

 可以用来阻止事件pointer-events:none;可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着。 而display:none;是你摸不着,但是你也看不见。 pointer-events:none;摸不着,但是看得见。...

CSS样式大全

CSS样式大全

CSS样式大全字体属性:(font)大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到,只要用数值就可以,单位:PX、PD样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常)行高{line-height:nor...

CSS之flex兼容

CSS之flex兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要支持,不支持的话,只能是你这个页面,这个产品被淘汰。那么为了不被淘汰,我们就要做些兼容性处理。我写页...

引人瞩目的 CSS 变量(CSS Variable)

引人瞩目的 CSS 变量(CSS Variable)

这是一个令人激动的革新。CSS变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。更准确的说法,应该称之为CSS自定义属性,不过下文为了好理解都称之为CSS变量。一直以来我们都知道,CSS中是没有变量而言的,要使用CSS变量,只能借助SASS或者LESS这类预编译器。但是新...

css设置全局变量和局部变量

css设置全局变量和局部变量

在我们使用less或者sass时常常会使用到局部变量和全局变量,其实在我们使用css做开发时也可以定义全局变量和局部变量来简化我们的开发效率,很简单也很实用;1.设置全局变量只需要在我们的根引用的css文件中声明就行,具体代码如下::rout{--cssname:value}这样就声明了一个变量名为...

纯CSS实现垂直居中的几种方法

纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。方法1:table-cellhtml结构:    <div class="boxbox1">&...

CSS的子选择器与后代选择器的区别

CSS的子选择器与后代选择器的区别

 来源于:http://www.jianshu.com/p/599654ba5f4a一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:.food>li{border:1pxsolidred;}这行代码会使class名为...