CSS 实例
CSS背景
CSS文本
CSS的字体
CSS链接
CSS列表
CSS表格
CSS盒模型
CSS边框
CSS轮廓
CSS边距
CSS填充
CSS分组和嵌套
CSS尺寸
CSS显示
CSS定位
CSS浮动
CSS对齐元素
CSS生成的内容
CSS伪类
:first-child - 匹配了 p 元素中的第一个 i 元素
:first-child - 匹配了第一个p元素中的所有I元素
CSS伪元素
CSS导航栏
CSS图片廊
CSS图像的不透明度
CSS图像拼合
CSS属性选择器
CSS 应用实例
- CSS 加载进度条
- CSS 分页样式
- CSS 进度条
- CSS 提示信息实例
- CSS 文字覆盖图像悬停效果
- CSS 文字覆盖图像悬停效果 - 从上至下
- CSS 文字覆盖图像悬停效果 – 从下至上
- CSS 文字覆盖图像悬停效果 – 从右至左
- CSS 文字覆盖图像悬停效果 – 从左至右
- CSS 文字覆盖图像悬停效果 – 淡入透明
- CSS 垂直按钮组
- CSS 按钮组
- CSS Loading(加载) 动画效果
- CSS Loading(加载) 动画效果2
- CSS Loading(加载) 动画效果3
- CSS Loading(加载) 动画效果4
- CSS 动态搜索框
- CSS 用户信息卡片
- CSS 卡片样式
- CSS 上一页、下一页样式
- CSS 各种提示信息框
- CSS 三种价格表样式
- CSS 开关样式
- CSS 让 DIV 水平居中显示
- CSS 上下左右四个方向箭头
- CSS 反馈信息表单
- CSS font-awesome 图标菜单栏
- CSS 顶部导航样式实例
- CSS 便签样式效果
- CSS 水平滚动菜单
- CSS 垂直菜单
- CSS 垂直滚动菜单
- CSS 固定菜单栏
- CSS 响应式登陆表单
- CSS 固定底部菜单栏
- CSS 下拉菜单
- CSS 下拉内容的对齐方式
- CSS 导航条下拉菜单
- CSS 带搜索框的导航栏
- CSS 带搜索导航栏 - 带提交按钮
- CSS 带搜索导航栏 - 带提搜索图标
- CSS 固定左侧导航栏
- CSS 固定左侧导航栏 – 高度自适应
- HTML/CSS/JS 联系表单模板(带百度地图)
- CSS 设计一个网页
千年的回眸
WebKit的CSS扩展属性 该方法适用于WebKit浏览器及移动端;
-webkit-line-clamp 限制在一个块元素显示文本的行数 需要组合其他的WebKit属性
常见结合属性
display: -webkit-box; 必须结合的属性 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 必须结合的属性 设置或检索伸缩盒对象的子元素的排列方式
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
div {
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}