【【学】CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转】的更多相关文章

【学】CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转

首先要说一下,transition属性ie9是不支持的,从ie10才开始支持 例子是当鼠标移上div后,它会旋转180度. 要点: 用圆角制作圆形盒子,border-radius设置成50%: 用box-shadow来制作内填充填满的效果,box-shadow有6个参数 水平阴影宽度(px); 垂直阴影宽度(px); 模糊距离(px); 阴影大小(px); 阴影颜色: 外部阴影(outset,默认)还是内部(inset); 用transition做动画,将圆形盒子里的图标也跟着转180度 -要注…

【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe…

HTML5移动开发学习笔记之CSS3基础学习

CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现的效果是: 2.CSS定位与浮动 1)定位: 属性 描述  position 把元素放到一个静态的(static:元素框正常生成),相对的(relative:元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置]),绝对的(absolute:元素框从…

CSS3基础入门03

CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径向渐变则是以一个点为基点(圆心),以点向四周进行渐变.渐变形状为一个圆,重复渐变则分为重复线性渐变和重复径向渐变,是对于前面两种渐变的一种重复模式. 语法: linear-gradient:point| angle color percentage point表示方向,angle表示角度. colo…

CSS3基础入门01

CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨按照选择器.布局.样式等分类来学. 主流浏览器和浏览器前缀 目前来讲,主流浏览器包括谷歌浏览器.火狐浏览器.safari浏览器.opera浏览器和ie浏览器. 而五大浏览器又对应着不同的内核: •Trident IE •Gecko firefox •Presto opera •Webkit (Saf…

CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视,用于设计网页的外观效果.通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率. 一.CSS基础用法 CSS代码可以在任何文本编辑器中打开和编辑.因此,不管读者有没有变成基础,初次接触CSS时会感到很简单. 1.1 CSS样式 样式是CSS最小的语法单元,每个样式包含两部分内容:选择器和声明(规则),…

css3基础教程：CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m…

CSS3盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-).一.box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分ht…

CSS3基础知识

CSS3基础 1 样式表的使用 1.内联样式表. 只影响单个元素,常用于标签. <p style="color: aqua;font-size: 20px">This is CSS.</p> 2.内部样式表. 对本页面元素起作用,一般写在<head></head>中,用<style></style>定义. <head> <meta charset="utf-8"> <…

CSS3基础入门02

CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-left 相同.如果省略 top-right,则与 top-…