css3
文章平均质量分 68
net_chengsheng
有过android应用开发经验,对前端web,后端php都有一定程度程度的理解
展开
-
CSS3新增选择器示例-伪类选择器
一. 伪类选择器介绍1.1 首先了解下什么是类选择器类选择器语法:.类名也就是标签的class属性值示例代码<!DOCTYPE html><html><head> <title>css3中选择器示例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style>原创 2017-07-10 09:59:24 · 5350 阅读 · 0 评论 -
CSS3-用过渡实现气泡效果
要想做一张泡泡浮动的效果图,首先要准备一张泡泡图片 实现代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">v { <title>过渡动画</title> <style> .div{ width: 343px;原创 2017-07-20 13:55:09 · 3750 阅读 · 0 评论 -
CSS3-过渡
一. CSS3过渡介绍1. transition-property 介绍2. transition-duration介绍3. tansition-timing-function介绍4. transtion-delay介绍使用示例原创 2017-07-15 19:34:18 · 333 阅读 · 0 评论 -
CSS3-背景尺寸
1. css3中背景功能扩展介绍 背景在CSS3中得到了很大程度的增强。 比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 这篇文章主要介绍关于对背景尺寸的一些新增功能。2. 设置背景图片 在介绍css3新增背景功能之前,先看下正常的设置一张图片背景我选用了一张835*835大小的图片 将该图片设置到一个大小为400*400的盒子上,做背景图示例代码<!原创 2017-07-11 19:45:09 · 925 阅读 · 0 评论 -
CSS3-渐变
1. 渐变介绍 渐变是作用在当前元素的背景色上面的2. 线性渐变 linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果2.1 使用 需要配置background: linear-gradient(渐变方向, 起始颜色,中止颜色) 只能是配置background使用,在background-color上无效 渐变方向: ① to l原创 2017-07-11 15:28:19 · 820 阅读 · 0 评论 -
CSS3-盒模型
一.盒模型介绍 所谓的盒模型,是CSS中的一个重要的概念, 用来布局和设计页面。 由:margin(外边距)、border(边框)、padding(内边距)、content(内容),四部分组成。 Html的所有元素都可以当成盒子来对待如下图二. CSS3中对盒模型扩展2.1 在css中影响盒子大小的因素: 我们知道在css中影响盒子大小的因素有border、paddin原创 2017-07-11 11:41:50 · 328 阅读 · 0 评论 -
CSS3-阴影
1. 文本阴影 text-shadow 可分别设置偏移量、模糊度、颜色(可设透明度)。 ① 水平偏移量 正值向右 负值向左 ② 垂直偏移量 正值向下 负值向上 ③ 模糊度 不能为负值 ④ 阴影的颜色示例代码1<!DOCTYPE html><html><head> <title>设置文本阴影-单个阴影</title> <meta原创 2017-07-10 18:04:12 · 723 阅读 · 0 评论 -
CSS3-新增颜色
一. CSS3中新增颜色1.1 第一种颜色表示方式:RGBA RGBA 分别表示Red(红色), Green(绿色),Blue(蓝色),Alpha(透明度通道) 透明度取值范围0 ~ 1 ,颜色 0 ~ 255 例如:rgba(255, 0, 50, 0.5); css3 之前,设置透明度是可以通过opacity来设置。可被子类继承 通过rgba设置的透明度,不具有原创 2017-07-10 17:50:11 · 414 阅读 · 0 评论 -
关于CSS3中伪类选择器的-E:nth-child(an + b) n 取值范围
nth-child(an + b) 的写法是固定的,不能颠倒,写成nth-child(b + an)无效当a 为正数时,an + b 的最大值为所有子元素的个数,超过该值n 就停止递增当a 为负数时, an + b 的最大值,不能小于 1, 小于1 ,n 停止递增详见:CSS3新增选择器示例-伪类选择器原创 2017-07-10 15:46:31 · 1375 阅读 · 0 评论 -
CSS3-2D转换
CSS3转换 转换是 CSS3 中具有颠覆性的特征之一,通过转换我们可以实现对元素的移动、缩放、转动、拉长或拉伸。转换属性 属性 描述 transform 向元素应用 2D 或 3D 转换。 transform-origin 允许你改变被转换元素的位置2D Transform方法 函数 描述 matrix(n,n,n,n,n,n) 定义2D转换,使用六个值原创 2017-07-20 16:02:52 · 618 阅读 · 0 评论