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. 2.获取指定目录及子目录下所有txt文件的个数,并将这些txt文件复制到F盘下任意目录

    package cn.it.text; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...

  2. 全网搜歌神器Listen1 Mac中文版

    listen1 for mac中文版是mac上一款强大的全网搜歌音乐播放器,支持网易云音乐.QQ音乐.虾米音乐.酷狗音乐以及酷我音乐等网站的歌曲搜索播放功能,拥有创建歌单.随心播放.歌曲收藏.快速搜索 ...

  3. 【题解】Luogu P4381 [IOI2008]Island

    原题传送门 题意:求基环树森林的直径(所有基环树直径之和) 首先,我们要对环上所有点的子树求出它们的直径和最大深度.然后,我们只用考虑在环上至少经过一条边的路径.那么,这种路径在环上一定有起始点和终点 ...

  4. IDEA汉化教程

    https://blog.csdn.net/weixin_38500325/article/details/81393251

  5. Star in Parentheses

    问题 A: Star in Parentheses 时间限制: 1 Sec  内存限制: 128 MB 题目描述 You are given a string S, which is balanced ...

  6. 微信支付之App支付

    项目接入微信支付的准备工作: 注册成为开发者,进行资质认证,这里是需要300元的审核费用的: 在微信商户平台创建应用,提交等待审核(大致需要5-7个工作日): 应用审核通过之后,进入应用,开通微信支付 ...

  7. Jmeter 常见错误

    常见错误 https://testerhome.com/topics/10950 接口测试 https://blog.csdn.net/github_27109687/article/details/ ...

  8. Nginx 504 Gateway Time-out分析及解决方法

    一.场景还原php程序在执行抓取远程图片库并保存至本地服务器的时候,出现了“504 Gateway Time-out”错误提示. 问题定位:由于图片巨多,所以下载时间很长(10分钟以上),引起网关超时 ...

  9. 彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系

    首先用一段通俗易懂但是不是非常专业的话描述一下三者的概念.区别和联系. Gradle是个构建系统,能够简化你的编译.打包.测试过程.熟悉Java的同学,可以把Gradle类比成Maven. Gradl ...

  10. @keyframs实现图片gif效果

    页面中使用动效图 一般让设计出一个gif格式的图,但是git图效果都很差,有一个替代gif图做动效的方法:使用@keyframes 具体思路: 1.设计两个互斥的图片(相当于把gif图分割成一帧一帧的 ...