CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
2024年10月26日
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
2024年10月26日
在css3之前，并没有直接的设置元素圆角的属性，那如何实现设计图中的圆角设定呢？
如：表单demo中的文本框圆角。
一般通过在PS 软件中截取上左、上右、下左、下右四个边角的圆角图片，通过background-position背景图属性设定位置，从而实现圆角的设定。
或是将四个圆角图片当做四个img标签，通过position定位属性找寻设定的位置，如：
在IE6、7、8还比较盛行的时候，如果要兼容到IE浏览器，需要使用CSS hack兼容IE浏览器版本，高级浏览器可以直接使用border-radius属性设定圆角，对低版本浏览器使用图片定位的方式实现设计图呈现。但随着近几年浏览器版本的不断更新迭代，我们需要做的就是，如果需要兼容低版本浏览器，只需保证呈现正常即可，无需过分的追求展示效果与设计图的还原度。
2024年10月26日
先看下效果图
对基于CSS的设计最初的批评意见之一是CSS太死板了，只能建立方框，因此本次我们需要用图形软件创建下面两个图形，一个用于顶部，一个用于底部。
接下来我们详细介绍它的实现方法：
1.创建一个简单的框标记并输入相关内容
<div class="box">
<h2>笑话</h2>
<p>朋友圈里，有这么一条：“和女友分手后一直很不安，害怕她会变坏，胡乱约炮，太过放纵，怎么办？”下面神回复：“其他人的恶劣行径顶多是占着茅坑不拉屎，你这是出了厕所还想锁门。”</p>
2024年10月26日
Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建:
实例
<div class="panel">
<h3>标题</h3>
<p>文本内容..</p>
</div>
面板颜色
使用 .callout 类将面板颜色修改为浅蓝：
2024年10月26日
圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天，小海前端（头条号）为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性
2024年10月26日
这几日，随着小白对HTML5认识的提升，他自己没事浏览网页的时候总会注意一些特殊的展示效果，让他印象最深刻的一个效果就是用户头像了，一个矩形的图片怎么就显示成圆形了呢？一上午没想明白，下午看着老朱没什么事，就去向老朱请教：“朱哥！网页上的图片怎么能显示成圆角呢？特别是正圆形是怎么做出来的啊？”
老朱随口说道：“border-radius啊！之前我们已经用过几次了啊！”
小白说：“这不是控制容器圆角的么？图片也可以控制么？”
老朱说：“讲图片的时候我不是告诉过你了么？肯定是没好好听，图片标签img也是一个容器，它是一个放图片的容器，在img里面显示什么图片是靠src属性来决定的。既然是容器你不是就可以用border-radius来控制了么？你试试！”
2024年10月26日
:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。
2024年10月26日
实例
设置text-outline（文本-轮廓）:
p.test
{
text-outline: 2px 2px #ff0000;
}
浏览器支持
任何主流浏览器都不支持text-outline属性。
属性定义及使用说明
text-outline属性指定文字大纲。
2024年10月26日
在现代网页设计中，适应用户的颜色偏好变得越来越重要。CSS 提供了强大的工具来实现这一目标，其中 `color-scheme` 属性尤为关键。本文将详细介绍如何利用 CSS 中的配色方案，以及一些高级技巧来优化用户体验。
媒体查询一直是 Web 开发者的得力助手，特别是 `prefers-color-scheme` 查询，它允许我们根据用户偏好切换明暗主题。然而，CSS 的 `color-scheme` 属性提供了更简单的方法来适应用户的颜色偏好。
2024年10月26日
颜色，由三基色组成，各种说法不一，通常是指 红（R）绿（G）蓝（B）三种颜色。
颜色值，由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。无论是RGB（0~255）表示，还是十六进制表示，他们其实表达的都是一样的。
提供个表格，给正在写HTML的你做个参考。三种颜色混合而成的具体效果：
仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。