2018-08-20

CSS3:用于控制网页的样式和布局

1.transform:rotate(30deg);

 
 
 CSS3 模块

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

CSS3 边框

  • border-radius(圆角边框)
  • box-shadow(添加阴影)
  • border-image

在div中添加圆角元素:

div
{
border:2px solid red;
border-radius:25px;
}

在div中添加box-shadow属性

div
{
box-shadow: 10px 10px 5px #888888;

CSS3 边界图片

使用图像创建一个边框:

border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:

在 div 中使用图片创建边框:

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */

CSS3 背景


CSS3 背景

背景属性:

  • background-image
  • background-size
  • background-origin
  • background-clip          

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

CSS3 background-size 属性

background-size指定背景图像的大小。

CSS3的background-Origin属性

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

在 content-box 中定位背景图片:

CSS3 渐变(Gradients)


CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

线性渐变的实例:

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

实例

从上到下的线性渐变:

#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */ }

实例

从左到右的线性渐变:

#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

CSS3特性的更多相关文章

  1. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

  2. 现在就能投入使用的12个高端大气上档次的CSS3特性

    原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ 原文中有demo展示及下载. 翻译开始 ...

  3. 20个非常绚丽的 CSS3 特性应用演示

    这篇文章收集了20个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用  ...

  4. 利用CSS3特性巧妙实现漂亮的DIV箭头

    DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...

  5. CSS3特性修改(自定义)浏览器默认滚动条

    前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成 ...

  6. CSS3特性 盒模型 动画

    转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transi ...

  7. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  8. JavaScript快速检测浏览器对CSS3特性的支持情况

    项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...

  9. 20、前端知识点--html5和css3特性(一)

    [html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...

随机推荐

  1. Docker 构建 RabbitMQ 集群

    刚开始,关于RabbitMQ集群的搭建,我找到了这篇文章:Docker 安装 RabbitMQ 集群 从而找到了第三方的RabbitMQ集群容器 rabbitmq-server 但是这个容器只有3.6 ...

  2. CSS——img自适应div大小

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  3. QT 添加外部库文件

    LIBS += D:\Code\Opengltest\OpenGL32.Lib D:\Code\Opengltest\GlU32.Lib LIBS += OpenGL32.Lib GlU32.Lib  ...

  4. java项目word文件转html文件

    最近在项目开发中用户提出要在电脑上没有装office时在浏览器中打开word文件,最后确定的逻辑:用户选择想要查看的文件,页面js判断文件是否为word.不是执行下载,是后端根据word文件后缀访问对 ...

  5. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  6. iOS日历控件

    项目需要,前一阵子重构了下iPad工程,添加了一个滚动无缝日历. 当时没有头绪,网上找了一个源码改吧改吧就上线了(参考链接),这个功能很多而且流畅性也特别好,推荐不会写的可以参考下. 这几天,活不太忙 ...

  7. UWP中MarkupExtension的使用

    Xaml作为一种描述语言,在编程中极大地简化了页面开发的繁琐及时间消耗,这得益于它的多种特性:数据绑定.动画.资源文件等等.标记扩展作为其一个特性,在xaml中有不可替代的作用,今天分析下自定义标记扩 ...

  8. 解决ping不通win7主机

    之前在路由器上ping笔记本发现ping不通,但是笔记本ping路由器通,也没多想.今天想起来可能是win7的防火墙作怪,以前上课虚拟机好像也是ping不通宿主机,但是宿主机能ping通虚拟机. 简单 ...

  9. 7.20 Codeforces Beta Round #8

    链接:codeforces.com/contest/8 A 原因:RE,fantasy 的字符串的长度可能大于原字符串. B 题意:上下左右走,可能要避让障碍,问是否存在一个地图使得给定的路径为当前最 ...

  10. C# DataGridView 动态添加列和调整列顺序

    https://yq.aliyun.com/articles/421700 // DataGridView1的ColumnDisplayIndexChanged事件处理方法private void D ...