CSS3
关注
分享
扫一扫
蝴蝶教程
前端工程师的职责是制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
展开
-
纯CSS 编写三角形箭头提示
要创建应从工具提示的特定一侧显示的箭头，请在工具提示后添加“空”内容，并将伪元素类::after与content属性一起添加。箭头本身是使用边框创建的。这将使工具提示看起来像一个讲话泡泡。此示例演示如何将箭头添加到工具提示的底部：<!DOCTYPE html><html><meta charset="utf-8"><title>教程（jc...原创 2019-10-17 08:49:11 · 186 阅读 · 0 评论 -
CSS轮廓大全
CSS轮廓轮廓线是围绕边界（border）外的元素绘制的线，以使元素“脱颖而出”。CSS具有以下轮廓属性：outline-style outline-color outline-width outline-offset outline轮廓样式outline-style属性指定轮廓的样式，并且可以具有以下值之一：dotted- 定义虚线轮廓 dashed- 定义虚线...原创 2019-10-15 08:41:00 · 366 阅读 · 0 评论 -
CSS 组合选择器
CSS组合器组合器可以解释选择器之间的关系。CSS选择器可以包含多个简单选择器。在简单的选择器之间，我们可以包括组合器。CSS中有四种不同的组合器：后代选择器（空格） 子选择器（>） 相邻的兄弟选择器（+） 一般兄弟选择器（〜）后代选择器后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有<p>元素：div p...原创 2019-10-14 09:34:14 · 215 阅读 · 0 评论 -
HTML元素 | 有效的DOCTYPES 你知道了吗
下表列出了所有HTML元素，并显示了每个元素出现的内容!DOCTYPE。标签 HTML5 Transitional Strict Frameset XHTML 1.1 <a> 有效 有效 有效 有效 有效 <abbr> 有效 有效 有效 有效 有效 <acr...原创 2019-10-11 09:26:03 · 110 阅读 · 0 评论 -
CSS多列属性详解
CSS多列属性在本章中，您将了解以下多列属性：column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width下表列出了所有多列属性：属性 描述 column-count 指定元素应划分的列数...原创 2019-10-10 09:09:42 · 257 阅读 · 0 评论 -
CSS background属性
background属性是以下属性的缩写属性：background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment如果缺少上述值之一，则无关紧要，例如backgr...原创 2019-10-09 09:01:45 · 175 阅读 · 0 评论 -
CSS 函数（方法）大全
CSS函数（方法）参考CSS函数用作各种CSS属性的值。函数 描述 attr() 返回所选元素的属性值 calc() 允许您执行计算以确定CSS属性值 cubic-bezier() 定义Cubic Bezier曲线 hsl() 使用Hue-Saturation-Lightness模型（HSL）定义颜色 hsla() 使用Hue-Sat...原创 2019-09-23 10:43:16 · 1621 阅读 · 0 评论 -
HTML5语义化元素你真的用的正确吗
HTML5语义元素语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例：<div>和<span>- 对其内容一无所知。 语义元素的示例：<form>，<table>和<article>- 清楚地定义其内容。 所有现代浏览器都支持HTML5语义元素。H...原创 2019-07-25 09:45:10 · 348 阅读 · 0 评论 -
css3响应式和自适应布局
让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色/* 将body的背景颜色设置为tan */body { background-color: tan;}/* 在992px或更低的屏幕上，将背景颜色设置为蓝色 */@media screen and (max-width: 99...转载 2019-07-03 15:10:22 · 499 阅读 · 0 评论 -
CSS3 :before和:after伪类的用法
什么是伪类？伪类用于定义元素的特殊状态。 例如，它可用于：当用户将鼠标悬停在元素上时为其设置样式 访问和未访问的链接不同样式 在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有<p>元素：选择器:伪类 { 属性:值; }链接可以以不同方式显示：/* 未访问的链接 ...转载 2019-07-08 16:27:12 · 1429 阅读 · 0 评论 -
移动端flex布局
flex属性是下列属性的缩写属性：flex-grow flex-shrink flex-basisflex属性设置flex项目的长度。注意：如果元素不是flex项，则flex属性无效。特征 说明 默认值 0 1 auto 继承 没有 动画 有。CSS动画参考 CSS版本 CSS3 JavaScript语法 object.st...转载 2019-07-01 17:30:43 · 328 阅读 · 0 评论 -
CSS3动画和文本的溢出显示省略号
CSS3动画知识点目前浏览器都不支持 @keyframes 规则。Firefox 支持替代的 @-moz-keyframes 规则。Opera 支持替代的 @-o-keyframes 规则。Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。帧的动画的语法设置@keyframes animationname {keyframes-selector ...原创 2017-05-16 22:09:49 · 927 阅读 · 0 评论