CSS3 - 技术教程文章
css3 做border = 0.5px的细线
参考： https://blog.csdn.net/Tyro_java/article/details/52013531原文：https://www.cnblogs.com/linjiangxian/p/11460729.html
CSS3 多媒体查询：查找设备的类型，CSS3 根据设置自适应显示
CSS3 多媒体查询CSS2 多媒体类型@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度...
一款基于jquery和css3的头像恶搞特效【代码】【图】
今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="wwiaftm-container"><div class="base wwiaftm"><div class="body-1 wwiaftm"><div class="body-2 wwiaftm"><div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)"></div><div class...
什么是CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定...
CSS3实现的一款三级下拉菜单【代码】
<html><head><title>河北礼品公司</title><style> body {background:#eee;margin:0;padding:0;} .example {background:#fff url(/imagesforcode/201306/clouds-in-blue-sky.jpg);width:770px;height:570px;border:1px #000 solid;margin:20px auto;padding:15px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}/* main menu styles */ #nav {display:inline-block;width:100%;margin:0px auto;padding:0;ba...
基于css3的环形动态进度条（原创）【代码】
基于css3实现的环形动态加载条，也用到了jquery。当时的想法是通过两个半圆的转动，来实现相应的效果，其实用css3的animation也可以实现这种效果。之所以用jquery是因为通过jquery可以在网站中动态改变加载的百分比。同时，用如果单纯用css3的animation的话扩展性太差，因为你要先确定出百分比是多少，而如果百分比超过一半时，左边的半圆也需转动，单纯用animation就太复杂了。 另外，svg和canvas都可以实现这样的效果。canvas...
css3渐变 彩虹条纹【代码】【图】
linear-gradient 常用来制作渐变，如（色彩渣，我就随便找个颜色举例）css代码如下background:linear-gradient(45deg,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%);如果想制作条纹，很简单啦background:linear-gradient(45deg,#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9...
CSS3之flex兼容写法【代码】
很久不写博文，之前的长时间不上都关闭了，但随着工作时间长越来越长，对知识的积累和总结还真的是很重要的。所以奉劝码农们每天都还是要抽出来一点时间总结点东西，以后对你受益匪浅！！今天还是变谈CSS3里的flex怎么处理兼容的flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了，虽然现在低版本浏览器不支持，可是对于移动来说兼容性不是问题，可是在安卓4.3以后版本里。那就不好用了...
[CSS3] Using flex-direction to layout content horizontally and vertically
The Flexbox css spec allows for more adjustable layouts. The flex-directionproperty allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries. Idea is when greater then 599px, it will show in row layout, when it goes down under 599px, it will show in column layout. 原文：http://www.cnblo...
CSS3的高级特性
CSS3对响应式设计非常有用：使用CSS3替代图片，在有带宽限制的网页中可有效减少http请求（从而使网页加载更快），并可使网页更灵活、更容易维护。在开发CSS3时，要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。1.文字阴影 1.基本语法 .element{ text-shadow:1px 1px 1px #cccccc; } 记住，阴影值的速记规则永远是先右再向下。因此，第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第...
css：css3新特性（盒子模型的box-sizing属性、图片模糊处理、calc函数）【代码】【图】
1、盒子模型（1）border属性和padding属性会影响盒子的实际大小：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script></script><style>div{width: 200px;height: 200px;background-color: black;border: 30px solid red;}</style></head><body><div></div></body> </html> <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script></script><style>div{width: 200px;height: 200px;ba...
CSS3旋转——彩色扇子兼容firefox浏览器
看到一网站做了一个彩色扇子的视频教程，尼玛还需要10大洋 至此，我有点不爽，这么一点东西也许要钱，我擦啊，于是闲的蛋痒的我，自己去搞了一个 HTML代码 复制代码代码如下:<div class="main"> <div class="main1"></div> <div class="main2"></div> <div class="main3"></div> <div class="main4"></div> <div class="main5"></div> <div class="main6"></div> <div class="main7"></div> <div class="main8"></div> <div class=...
CSS3 transform实现图片投影效果
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>图片投影效果</title><style>.box {position: absolute;padding: 2px;background: white;-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);box-shadow: 1px 2px 4px rgba(0,0,0,.5);}.box img {display:block;width:200px;height:220px;border: 1px inset #8a4419;background:#eee;}.box:after {content: ‘‘;-webkit-box-...
css3实现的4种动画特效按钮【代码】【图】
今天要给大家介绍的是css3按钮，里面包含四种特效的动画，如下图： 在线预览 下载源码实现html代码：<div align="center" class="fond"><br /><div class="bouton_1"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_1">Ajouter au panier</span></a></div><br /> <br /><div class="bouton_2"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_2">Ajouter au panier</span></a></div><...
css3渐变
转载别人的，讲得很详细原文: http://www.w3cplus.com/css3/new-css3-linear-gradient.html ? w3cplus.com 再贴几个关于渐变配色的网址https://uigradients.com/#Frosthttps://webgradients.com/原文：http://www.cnblogs.com/AliceLiu/p/6797153.html
CSS3内容溢出详解
CSS3内容溢出属性在CSS中的每一个元素都视为一个盒子，这个盒子就是一个容器。容器就有大小之分，如果在样式中指定盒子的宽度与高度，可能某些内容在盒子中就会容不下， 此时 就可以使用overflow 属性来指定如何显示盒中容纳不下的内容。overflow 属性是CSS2.1规范中的特性， 而在CSS3中增加了overflow-x和overflow-y 属性。overflow-x主要是用来定义对水平方向内容溢出的剪切， 而overflow-y主要用来定义对垂直方向内容溢出的剪切...
css3新增伪类
1、p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素2、p:first-child , 匹配属于其父元素中的首个子元素(子元素:first-child) table tr:first-child{}3、p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。4、p:last-child 匹配属于其父元素中的最后一个子元素 table tr:last-child{}5、p:only-of-type 选择属于其...
10_CSS3简单入门——文本样式设置【代码】【图】
这一次简单介绍下CSS3的文本样式设置以下内容参考1、https://www.bilibili.com/video/BV1ds411r7o7 【星月教你做网站】2、https://www.bilibili.com/video/BV1Mx411m7fd 【极客学院：Web前端开发教学】 以下是文本样式设置的一些属性设置属性描述color文本颜色direction文本方向line-height行高letter-spacing字符间距text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-transfor...
CSS3教程:Transform的perspective属性设置【代码】
12 <div id="animateTest"style="-webkit-transform: perspective(400px) rotateY(40deg);">Css12<div id="animateTest"style="-webkit-transform: rotateY(40deg) perspective(400px);">如果大家不清楚，请听我娓娓道来。CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：只能选择透视方式，...
纯CSS3实现支持自定义设定的图标【代码】【图】
网上有各种用CSS3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套CSS3图标，那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同，但是大势所趋，写写更健康。首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
CSS3小水滴代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>.droplet { width: 4em; height: 4em; border-radius: 80% 0 55% 50% / 55% 0 80% 50%; background-color: #07C; transform: rotate(-45deg);} </style></head><body> <div class="droplet"></div> </body></html>原文：http://www.cnblogs.com/DonaldTrump/p/5773600.html
HTML5时代看css3新增属性
写在前面的话： 由于CSS3标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各家自标准前加了一个前缀，如：-moz-主要是firefox火狐 -webikt-主要是chrome谷歌 -o-主要是用于苹果浏览器 一.box-shadow（阴影效果）使用：box-shadow：20px 10px 0 #000；-moz-box-shadow：20px 10px 0 #000；-webkit-box-shadow：20px 10px 0 #000；支持：FF3.5，Safari4，Chrome3二.border-colors（为边...
css3 学习图谱【图】
摘要最近看了一篇文章，建立最近的知识体系，对于工作了几年的大牛需要，但对学生学习同样也需要，我试着做了自己的css知识总图，类似目录，引导我的学习路线。 原文：http://www.cnblogs.com/AliceX-J/p/5323142.html
用css3选择器给你要的第几个元素添加不同样式方法【转发】【代码】
下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开...
CSS3——制作图片翻页的小动画【代码】【图】
觉得还挺有意思的嘻嘻~这里有一个问题要注意一下，图片反转过程中可能会遇到一种如下所示的跳变bug：这玩意一出来吓我一大跳，显然这种用户体验是很不好的，解决方法：在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg) 这句话就好啦！要给他一个初始的位置，这样他就不会乱飞啦~<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片翻面</title><style type="text/css">.con{wid...
css3在移动端中应用2（超实用）
阴影box-shadow:<length><length><length>||color;<style type="text/css"> div{ -webkit-box-shadow:3px 4px 2px #000; -moz-box-shadow:3px 4px 2px #000; box-shadow:3px 4px 2px #000; padding:5px 4px;}</style><style type="text/css"> div{ text-shadow:5px -10px 5px red; color:#666; font-size:16px;}</style>背景background-size:10px 5px;-webkit-background-size:10px 5px;background-ori...
CSS3 @font-face 指定英文网页字体【代码】【图】
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体。可能有人要问，使用这种字体，IE兼容性怎么办，那就大错特错了，@font-face甚至向下兼容到IE4，想想看自己的页面上能有自己自定义的字体是一件多么帮的事情啊，现在贴出一点学习过程与大家分享 首先选一款你要用的字体，有免费下载的或者付费购买的（我反正是下免费...
Css3 filter(滤镜)【代码】【图】
2015-12-20 17:05:13css3的filter滤镜效果。。。。css3的filter滤镜效果，filter是W3C CSS filter Effect 1.0中定义的滤镜效果，一个使用CSS来改变图片的模糊度、亮度、对比度、饱和度等等效果的过滤器。index.html中的代码如下：style.css中样式设置为：其中，background-attachment属性用于定义背景图片随滚动轴的移动方式，取值: scroll | fixed | inherit：scroll: 随着页面的滚动轴背景图片将移动；fixed: 随着页面的滚动轴背...
css3【代码】
1、卡牌翻转<!--卡牌反转--><div class="demo1"><div class="box"><div class="negative"></div><div class="positive"></div></div></div> .demo1{width: 200px;height: 300px;margin: 100px auto;}.demo1 .box{width:100%;height: 100%;position: relative;transform-style: preserve-3d;transition: transform 1s;cursor: pointer; animation:fanzhuan 2s infinite linear ; }.demo1 .positive{width: 100%;height: 100%;posit...
html5css3杂记
最新版本的safari、chrome、firefox以及opera支持某些html5特性。ie9将支持某些html5特性。html5提供了展现视频的标准<video>支持ogg及mpeg4等格式。音频〈audio〉.<canvas>用于在网页上绘制图形，使用js，调用绘图api.而svg、vml是使用xml描述绘图。html5 web存储：通过js来存储和访问数据；而客户端存储分为localStorage(存储的数据无时间限制，如纪录访问次数)和sessionStorage(针对一个session进行存储)。html5新的input类型（...