CSS3 - 技术教程文章
吴裕雄--天生自然PHP-MySQL-JavaScript学习笔记：支持CSS3的高级CSS【代码】
<!DOCTYPE html> <html> <!-- backgroundimages.html --><head><title>CSS3 Multiple Backgrounds Example</title><style>.border {font-family:Times New Roman;font-style :italic;font-size :170%;text-align :center;padding :60px;width :350px;height :500px;background :url(b1.gif) top left no-repeat,url(b2.gif) top right no-repeat,url(b3.gif) bottom left no-repeat,url(b4.gif) bottom right...
[原]利用CSS3实现模拟一个windows7桌面的页面【代码】【图】
利用CSS3的border-radius和box-shadow可以很容易的实现一个类似Windows7的桌面效果的页面，效果如图主要是圆角的设计，透明设计，参考css3实战地5章的类容，马马虎虎做了一下午，只有样式，没有事件，一个html文件，一个css文件。源码以下： simuWin7.html: 1 <html>2 <head>3 <title>用CSS3模拟Windows7的界面</title>4 <link rel="stylesheet" href="./simuWin7.css" />5 </head>6 <body>7 <!-- 桌面 -->8 <div id="desk...
# HTML5与CSS3从如入门到精通（第三版）（超简洁、实用学习笔记）
第一章：Internet和web基础1.1互联网和万维网 互联网一词是指由计算机网络连接而成的网络 万维网由蒂姆伯纳斯李发明，用HTTP进行通信，用HTML格式化文档 万维网由众多网页文件构成，文件中包含对网页进行描述的HTML和其它标记语言 1993年，第一个图像化浏览器Mosaic问世 1.2网页的无障碍访问 W3C主要解决的三个问题：架构、设计标准和无障碍访问 无障碍访问的网站通过遵循一系列标准来帮助人们克服这些障碍 网页通用设计是网页设计...
css3新增的属性【代码】【图】
1、边框border-radius box-shadow border-image 可以有多张背景图 border-image:url('..'),url('kkk')2、背景background-size background-origin background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。背景图片的定位区域 3、文本效果text-shadow word-wrap word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分4、@font-face<style> @fo...
css3 线性渐变和css3过渡一起用 过度时间不生效？换个方法做【代码】【图】
gavinmaster123推荐于2018-03-14 TA获得超过627个赞:: css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so U cant transition gradients for now. 但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。 css:<style> body{margin: 0;padding: 0; } .gavin_design div{width: 200px;height: 200px;margin: 20px auto; } .no{background: #ccc;-web...
CSS3【代码】
CSS3 1. 新增选择器 1.1 属性选择器 /* 可以自定义属性 */ /* 1、[x] 选择所有带有x属性元素 */[class] {} /* 2、[x=y] 选择所有使用x="y"的元素 */[class=head1] {} /* 3、[x|=y] 选择 x 属性以 y- 为开头的所有元素 */[name|=eng] {} /* 4、[x^=y] 选择每一个x属性的值以"y"开头的元素 */a[href^="http"] {} /* 5、[x$="y"] 选择每一个x属性的值以"y"结尾的元素 */[href$="com"] {} /* 6、[x*="y"] 选择每一个x属性的值包含字符串...
CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）【图】
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。 比如需要选择出input标签中具有value属性的内容，就可以按以下方式 // css input[value]{ ???color: #333; }// html <input type="text" value="请输入用户名">...
CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）【代码】【图】
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id比如需要选择出input标签中具有value属性的内容，就可以按以下方式// css input[value]{color: #333; }// html <input type="text" value="请输入用户名"> <input ...
前端学习_CSS3_2d转换效果（移动、旋转、缩放）【代码】【图】
前端学习——CSS3_2D转换效果 2D转换(transform) 2D转换是改变标签在二维平面上的位置和形状移动： translate旋转：rotate缩放： scale 1. 移动 translate 语法transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)translate`最大的优点就是不影响其他元素的位置translate中的100%单位，是相对于本身的宽度和高度来进行计算的行内标签没有效果 div {background-color: lightseagreen;width: 200px;height:...
CSS3新增选择器
CSS3（级联样式表） 新增基本选择器：子元素选择器 相邻兄弟元素选择器 通用兄弟选择器 群组选择器 兼容IE8+ FIreFox Chrome safari Opera 子元素选择器 概念：子元素选择器只能选择某元素的子元素 语法格式：父元素>子元素（father > childen） 相邻兄弟元素选择器 概念：相邻兄弟元素选择器可以选择紧接在另一元素后的元素，而且他们具有相同的父元素 语法格式：元素+相邻兄弟元素（Eelement+Si...
css3中translate、transform和translation，以及动画animation【代码】
example: 元素整体居中： .box{ position:absolute; top:50%; left:50%; width:50px; height:50px; transform:translate(-50%,-50%); background:gray; } 1.translate:移动，是transform的一个方法 通过translate()方法，元素从其当前位置移动，根据给定的left(x坐标)和top(y坐标)位置参数： 用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px); -webkit-transform: tr...
css3帧动画-animation的steps()用法详解【代码】【图】
steps() 是 animation-timing-function 的属性值animation-timing-function : steps(number[, end | start]) steps 函数指定了一个阶跃函数，它接受两个参数 第一个参数接受一个整数值，表示两个关键帧之间分几步完成 第二个参数有两个值 start or end。默认值为 end step-start 等同于 step(1, start)。step-end 等同于 step(1, end)steps 适用于关键帧动画，第一个参数将两个关键帧细分为N帧，第二个参数决定从一帧到另一帧的中间...
介绍盒子模型？IE盒子模型和W3C盒子模型的区别？CSS3中如何设置？【图】
W3C标准盒子模型：包括：内容（width，height），padding，border，margin盒子的可视宽度为：width + padding + border 标准盒子模型： IE盒子模型：包括：内容，padding，border，margin盒子的可视宽度为：width盒子的内容宽度为：width - border - padding IE盒子模型 CSS3中新增了box-sizing样式：box-sizing：content-box；=> W3C标准盒子模型box-sizing：border-box； => IE盒子模型
10分钟理解CSS3 Grid布局【代码】【图】
基本介绍 Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局），以往css框架中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点：html不够简洁； 需要清除浮动以避免高度塌陷； 列的个数是固定的，不能灵活定义。比如bootstrap是12列，semantic ui是16列，ant design 24列。当然grid也可以用flex实现，但是并不会比用float...
CSS3从入门到精通（复习查漏向【代码】【图】
CSS3从入门到精通（复习查漏向 pre_section CSS：层叠样式表，决定网页表现 网页为多层结构，CSS为每一层设置样式，最后显示最上一层 CSS语句 = 选择器 + 声明块形式内联样式 style="CSS语句"作为标签属性，仅本标签可以使用内部样式表 head标签中使用style标签+CSS语句，仅当前文件可以使用外部样式表 CSS语句作为独立文件，HTML需要使用时通过<link rel="stylesheet" href="CSS文件位置">常用选择器元素选择器 根据标签选择元素，...
CSS3【代码】
一：基础选择器 选择器分为基础选择器和复合选择器 1.标签选择器 语法： 标签名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ... } 2.类选择器： 语法： 类名 {属性1: 属性值1; ... } <div class=‘red’> 变红色 </div> 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。 多类名使用方式 <div class="red fon...
css3新特性【代码】【图】
c3有哪些新特性 介绍 css3是CSS（层叠样式表）技术的升级版本。CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远支持CSS2。一些最重要的css3模块包括：选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 ...... 新特性 一、css3的新选择器 1、标签选择器（元素选择器、标记选择器） div {}1）所有的标签都可以作为选择器使用 2）适用于更改某一种元素的默认样式2、id选择器 <div id="main"></div...
一些鲜为人知的的CSS3属性【代码】
webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。示例：设置高亮色为50%透明的红色:-webkit-tap-highlight-color: rgba(255,0,0,0.5);浏览器支持: 只有iOS(iPhone和iPad).webkit-text-size-adjust1、当...
网站开发进阶（六十六）CSS3 - 新单位vmin/vmax与旧单位ex/ch使用详解【代码】【图】
前言 vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。 （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh：视窗高度的百分比vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和...
CSS3三角形不断放大特效【代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS3三角形不断放大特效</title><link rel="stylesheet" href="css/style.css"> </head> <style>html {height: 100%;}body {padding: 0;margin: 0;height: 100%;background: #642B73;/* fallback for old browsers *//* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to left, #C6426E, #642B73);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26...
html5 css3总结
html5新属性 规定是否允许编辑内容 规定是否对元素语法进行检查 组合元素 规定是否允许拖动元素 css3新属性 边框：圆角边框 边框阴影 边框图片 背景：背景图片尺寸 文字效果：文本轮廓 当文本溢出时要操作的 文本阴影 文本换行规则 动画 css实现三角形border-left:?50px?solid?transparent;border-right:?50px?solid?transparent;border-bottom:?100px?solid?blue; ? 字符串翻转 使用split()把字符串分割成字符串数组...
【42】CSS3 （3）——新增常用属性②【代码】【图】
★文章内容学习来源：拉勾教育大前端就业集训营边框阴影一.介绍 边框阴影属性名box-shadow 属性值简介h-shadow必需的，水平阴影的位置。单位px，允许负值。v-shadow必需。垂直阴影的位置。单位px，允许负值。blur可选有无。模糊的距离。单位px，spread可选有无。阴影的尺寸，阴影扩展大小。 单位px。color可选有无。阴影的颜色。inset可选有无。写了inset会将外部阴影改为内部阴影。二. 语法 box-shadow 属性向盒子添加阴影；属性值...
CSS3的滤镜filter属性【代码】【图】
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。一、blur(px)高斯模糊二、brightness(%)亮度三、contrast(%)对比度四、drop-shadow()阴影注意： 这个 drop-shadow 与 box-shadow 都是在说阴影，但还是有区别的，看下图图中火焰的图片，是一张png图片，除了火焰以外，其他部分是透明的，我们能看见，box-shadow 是给整个图片加阴影，而 drop-sh...
css3 地球自转公转【代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div.box {width:100px;height: 100px;position: fixed;left: 45vw;top: 20vh;animation: turnBox 10s linear infinite;transform-origin: 0px 200px;}div.diqiu {width:100px;height: 100px;backgroun...
CSS3 动画卡顿解决方案
前端时间用 animation 实现 H5 页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留 700ms 后再缩小至顶部。代码如下 <!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" > <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.m...
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。...
CSS3新特性
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。 CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 css3的新特性一：1.圆角 border-radius:100%/100px; 2.盒子阴影 box-shaw:水平 垂直 模糊 范围 色值;3.过度transtion:all 2s;过度是将某个过程加快或者放慢4.渐变：线性渐变 background:linear-gradient(色值...
CSS3过度属性Transiton【代码】【图】
过度属性Trransition 使用css的属性值在一段时间内平滑的过度 比如这个效果 字体滑动 四个要素和触发过度属性，过度时间，过度函数，过度延迟的时间 触发主要通过用户触发，点击，悬浮等过度属性 transition-property:none|all|property多个属性用逗号隔开， 可设置过的属性有颜色，取值为数值的属性，转换属性，渐变属性，阴影属性过度时间 transition-duration：s|ms /*默认值为0*/过度函数 transition-timing-function:;取值: ...
CSS3制作文字背景图【代码】【图】
文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。方法一、利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 即可，简单原理如下：核心代码如下：<div class="container"><div class="pic"></div><div class="text">IMAGE</div> </div>.pic {position: relative;width: 100%;height: 100%;back...
css3-flex布局【代码】【图】
flex布局原理： 通过给父盒子添加flex属性 来控制子盒子的 @mixin flexbox($jc:sapce-between,$ai:center,$fd:row,$fw:nowrap) {display: flex;flex: 1;justify-content: $jc;align-items: $ai;flex-direction: $fd;flex-wrap: $fw }以下6个属性是对父元素设置的 flex-direction:设置主轴的方向 默认主轴方向就是X轴方向，水平向右 默认侧轴方向就是Y轴方向，水平向下 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴...