随笔分类 -  CSS3

CSS3（14）弹性盒子
摘要：CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的 阅读全文
posted @ 2020-04-13 15:13 盗哥泡茶去了 阅读(157) 评论(0) 推荐(0)
CSS3（13）分页
摘要：简单分页 代码： <style>ul.pagination { display: inline-block; padding: 0; margin: 0;}ul.pagination li {display: inline;} /*设置为内联元素*/ul.pagination li a { bord 阅读全文
posted @ 2020-04-12 23:25 盗哥泡茶去了 阅读(148) 评论(0) 推荐(0)
CSS3（12）图片
摘要：圆角图片 代码： <img src="xxx.jpg" style="border-radius:8px;"> 效果： 小技巧： 椭圆形图片：border-radius:50%; 缩略图 我们使用 border 属性来创建缩略图。 代码： <img src="xxx.jpg" style="widt 阅读全文
posted @ 2020-04-12 20:12 盗哥泡茶去了 阅读(111) 评论(0) 推荐(0)
CSS3（11）用户界面
摘要：CSS3 调整尺寸(Resizing) CSS3中，resize属性指定一个元素是否应该由用户去调整大小。 代码： style="resize:both;overflow:auto;" 效果： 调整属性指定一个元素是否由用户可调整大小的。 CSS3 方框大小调整(Box Sizing) box-si 阅读全文
posted @ 2020-04-12 19:14 盗哥泡茶去了 阅读(126) 评论(0) 推荐(0)
CSS3（10）多列
摘要：CSS3 多列属性 本章节我们将学习以下几个 CSS3 的多列属性: column-count 分割的列数 column-gap 列与列的间隙 column-rule-style 列与列间的边框样式 column-rule-width 列与列间的边框厚度 column-rule-color 列与列间 阅读全文
posted @ 2020-04-12 17:27 盗哥泡茶去了 阅读(117) 评论(0) 推荐(0)
CSS3（9）动画
摘要：CSS3 动画 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器： 规定动画的名称 规定动画的时长 <style> div.div1:hover { animation: myfirst 2s; //设置动画名称和 阅读全文
posted @ 2020-04-11 21:54 盗哥泡茶去了 阅读(130) 评论(0) 推荐(0)
CSS3（8）过渡
摘要：它是如何工作？ CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 指定要添加效果的CSS属性 指定效果的持续时间。 代码： <style> div{ width:100px; height:100px; background:red; transition:w 阅读全文
posted @ 2020-04-11 21:32 盗哥泡茶去了 阅读(109) 评论(0) 推荐(0)
CSS3（7）2D转换
摘要：CSS3 转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 2D 转换 在本章您将了解2D变换方法： translate() rotate() scale() skew() matrix() translate() 方法 translate()方法，根据左(X轴)和顶部(Y轴)位置给 阅读全文
posted @ 2020-04-11 18:29 盗哥泡茶去了 阅读(132) 评论(0) 推荐(0)
CSS3（6）字体
摘要：CSS3 @font-face 规则 使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。 只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。 <style> @fon 阅读全文
posted @ 2020-04-11 17:52 盗哥泡茶去了 阅读(109) 评论(0) 推荐(0)
CSS3（5）文本效果
摘要：CSS3 文本效果 CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性： text-shadow 文本阴影 box-shadow 盒子阴影 text-overflow 文本溢出 word-wrap 单词拆分换行 word-break CSS3 的文本阴影 CSS3 中，text-shad 阅读全文
posted @ 2020-04-10 21:34 盗哥泡茶去了 阅读(149) 评论(0) 推荐(0)
CSS3（4）渐变
摘要：CSS3 渐变（Gradients） CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 CSS3 线性渐变 为了创建一个线性渐变，你必须至少定义两 阅读全文
posted @ 2020-04-10 20:22 盗哥泡茶去了 阅读(165) 评论(0) 推荐(0)
CSS3（3）背景
摘要：CSS3 背景 CSS3中包含几个新的背景属性，提供更大背景元素控制。 在本章您将了解以下背景属性： background-image background-size background-origin background-clip CSS3 background-image属性 CSS3中可以通 阅读全文
posted @ 2020-04-09 20:31 盗哥泡茶去了 阅读(130) 评论(0) 推荐(0)
CSS3（2）边框
摘要：CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中，很容易创建圆角。 在 CSS3 中 border-radius 属性被用于创建圆角： 这是圆角边框！ border-radius 属性允许您为元素添加圆角边框！ 代码： <div style="bo 阅读全文
posted @ 2020-04-09 20:07 盗哥泡茶去了 阅读(137) 评论(0) 推荐(0)
CSS3（1）简介
摘要：CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3 模块 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 阅读全文
posted @ 2020-04-09 13:42 盗哥泡茶去了 阅读(85) 评论(0) 推荐(0)