适合初学者学习的CSS3实现可爱的动物_css教程
今天,我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。 话不多说,开始咯!
新的元素选择器
E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)
border-radius
又称圆角属性,通常使用该属性将图片圆角化,如头像。
border-radius: 50%;
border-radius另外一个常用的手段是CSS动画。
word-wrap & text-overflow
word-wrap属性用来指出浏览器在单词内进行断句,防止字符串太长而找不到它的自然断句点时产生的溢出。
word-wrap: break-word;
text-overflow用于文本溢出:
CSS 中伪类的使用(干货)_css教程
css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
单行缩略的实现如下:
.oneline { white-space: nowrap; //强制文本在一行内输出 overflow: hidden; //隐藏溢出部分 text-overflow: ellipsis; //对溢出部分加上... }
多行缩略实现如下(主要针对webkit内核):
.multiline { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
background
主要是以下三个属性:
background-clip 规定背景的绘制区域, 取值为border-box | padding-box | content-box | no-clip
background-origin 规定背景的定位区域, 取值为border | padding | content
background-size 规定背景图片的尺寸, 取值为[ | | auto]{1,2} | cover | contain
推荐教程:css快速入门
以上就是css3常见新特性介绍的详细内容,更多请关注ki4网其它相关文章!
使用CSS实现皮卡丘_css教程
当我学完css和js后,冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材,最终选择了皮卡丘,本篇文章教大家实现一个皮卡丘。