css高级属性有哪些

html-css08

css高级属性有哪些,第1张

CSS3高级属性可分为:选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。CSS边框和圆角transform:可以旋转、缩放、倾斜、平移的元素;border-radius:圆角;单独分离:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius左上角,右上角,右下角,左下角。第一个值:左上角, 第二个值:右上角、左下角,第三个值:右下角第一个值:左上角、右下角,第二个值:右上角、左下角四个圆角值相同box-shadow:阴影;投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色border-image:边框图片; background-image:多个图片路径;background-size:设置图片大小background-position:为多个图片路径设定位置;background-repeat:为多个路径设置图片显示是否重复;background-origin:指定图像的区域 background-clip:指定位置开始绘制。 注意:背景颜色只能设置一个background:图片路径 显示位置 是否重复,图片路径 显示位置 是否重复·········· CSS渐变色css有两种类型的渐变:线性渐变和径向渐变线性渐变:创建一个线性渐变,至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)background:linear-gradient(颜色···········) 默认从上到下·background:linear-gradient(to right,颜色···········) 从左到右·background:linear-gradient(to left,颜色···········) 从右到左·background:linear-gradient(to top left ,颜色···········) 从右下到左上·也可以按照角度来渐变background: linear-gradient(0deg, red, blue)重复的线性渐变:background: repeating-linear-gradient(red, yellow 10%, green 20%)径向渐变:至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,也可以指定渐变的中心、形状、大小。默认渐变的中心是 center,渐变的形状是 ellipse(椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。background: radial-gradient(位置,[形状], 颜色 【百分比】··················)CSS文本效果 文本属性:text-shadow:偏移量 向下大小 模糊度 颜色box-shadow:使用于盒子阴影word-wrap:break-word换行word-break:单词拆分换行属性指定换行white-space:处理元素中的空白

可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。例如:

# image {

position: relative//图片的相对位置

animation: falling 1s linear//动画名称为falling,持续时间1s,动画速度变化线性

}

@keyframes falling {

0% { top: 0px} //初始时图片位于顶部

100% { top: 300px} //最终时图片位于300px处

}

css全称叫:级联样式表,它将网页表现与内容分离,更好的维护,和更精确的定位,加载速度也比table要快,目前它几乎成了业内的标准,table布局已经落后了,缺点的话,就是比table理解上要难一些,编写也有点麻烦,不过好处大于它的缺点