Web前端开发（HTML5+CSS3+JavaScript） 课件 第8章 CSS3新特性.pptx

Web前端基础技术;;CSS3基础应用;b.边框圆角：border-radius:toprightbottomleft；;示例边框阴影与圆角---卡片式商品列表;style

*{

box-sizing:border-box;

}

.container{

width:800px;

/*border:1pxsolidred;*/

/*水平排列，可分行显示*/

display:flex;

flex-wrap:wrap;

};2.CSS3基础应用---样式属性;divclass=container

divclass=div1仍占据位置，浮动出来，不影响后续元素布局/div

/div;2.平面2D旋转：实例：转换为圆的旋转；

transform:rotate(ndeg)角度单位deg，顺时针旋转,默认旋转坐标：中心点.

可以更改选择基点:使用transform-origin:lefttop;/*基于左上顶点（00），可以使用关键字或具体数值*/;2.CSS3基础应用;示例缩放图片;使元素沿着水平方向或垂直方向发生倾斜;skew(0,30deg)

==skewY(30deg);????imgsrc=./images/1.jpg/

????imgsrc=./images/2.jpg/

????imgsrc=./images/3.jpg/???;2.CSS3基础应用;附：timing-function属性取值：;示例理解过渡：宽度、高度和背景变化时，产生过渡效果;示例效果过渡，缓慢旋转的圆;2.CSS3基础应用;示例模拟进度条;理解代码.无限循环旋转的圆；;;2.CSS3基础应用;

css多行文本溢出省略号

要在CSS中实现多行文本溢出显示省略号，可以使用以下属性：

display:-webkit-box;用以创建一个伪多行文本容器。

-webkit-box-orient:vertical;指定子元素的排列方向。

-webkit-line-clamp:N;其中N是显示的行数。

overflow:hidden;隐藏溢出的内容。