css3基础篇二
CSS3 边框
- border-radius
- box-shadow
- border-image(ie不支持)
语法
border-radius: 1-4 length|% / 1-4 length|%;
注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 | 描述 | 测试 |
---|---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
blur | 可选。模糊距离。 | 测试 |
spread | 可选。阴影的尺寸。 | 测试 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 | 测试 |
语法
background-size: length|percentage|cover|contain;
值 | 描述 | 测试 |
---|---|---|
length |
设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
测试 |
percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
测试 |
cover |
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
contain,cover: 要么充满x轴,要么充满y轴,根据图片和盒子的大小的确定;即经过计算background-size其中一个轴为100%(我们称为主轴) 另外一个轴为 auto(副轴);
区别:
contain:
副轴的大小一定是小于等于盒子的大小使得盒子里面能够完全放下图片
cover:
副轴的大小一定是大于等于盒子该方向的大小使得x,y轴都能充满图片
语法
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。(注意:本质上就是对背景图片的相对定位盒子容器如何定位)
background-origin: padding-box|border-box|content-box;
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 | 测试 |
语法
background-clip: border-box|padding-box|content-box;
值 | 描述 | 测试 |
---|---|---|
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
css3基础篇二的更多相关文章
- php基础篇-二维数组排序 array_multisort
原文:php基础篇-二维数组排序 array_multisort 对2维数组或者多维数组排序是常见的问题,在php中我们有个专门的多维数组排序函数,下面简单介绍下: array_multisort(a ...
- JavaScript笔记基础篇(二)
基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...
- Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析
转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...
- NIO相关基础篇二
转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- docker+k8s基础篇二
Docker+K8s基础篇(二) docker的资源控制 A:docker的资源限制 Kubernetes的基础篇 A:DevOps的介绍 B:Kubernetes的架构概述 C:Kubernetes ...
- Python基础篇(二)_基本数据类型
Python基础篇——基本数据类型 数字类型:整数类型.浮点数类型.复数类型 整数类型:4种进制表示形式:十进制.二进制.八进制.十六进制,默认采用十进制,其他进制需要增加引导符号 进制种类 引导符号 ...
- node基础篇二:模块、路由、全局变量课堂(持续)
今天继续更新node基础篇,今天主要内容是模块.路由和全局变量. 模块这个概念,在很多语言中都有,现在模块开发已经成为了一种潮流,它能够帮助我们节省很多的时间,当然咱们的node自然也不能缺少,看下例 ...
- C语言----输入输出语句(基础篇二)
今天整理一下自己的基础篇输入和输出的理解,自己没有研究系统输入和输出函数,以后有时间在去深究,之前在别人的博客里面看到这么一句话分享给大家,“学习就是一个不断抄袭,模仿,练习和创新的一个过程”. 使用 ...
随机推荐
- [转]WCF的几种寄宿方式
转自:WCF开发框架形成之旅---WCF的几种寄宿方式 WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为 ...
- Spring为了简化java开发採用的四种策略
以下是<Spring in action>中的总结性语言,记录下来,作为研究源码的主要线索. 1.採用轻量级的pojo.最小侵入式编程. 2.依赖注入(DI)和面向接口编程实现松耦合. 3 ...
- <转>Openstack Ceilometer监控项扩展
Openstack ceilometer主要用于监控虚拟机.服务(glance.image.network等)和事件.虚拟机的监控项主要包含CPU.磁盘.网络.instance.本文在现有监控项的基础 ...
- 卡尔曼滤波(Kalman Filter) 的进一步讨论
我们在上一篇文章中通过一个简单的样例算是入门卡尔曼滤波了.本文将以此为基础讨论一些技术细节. 卡尔曼滤波(Kalman Filter) http://blog.csdn.net/baimafujinj ...
- jQuery - 选中复选框则弹出提示框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- android在学习——activity关闭和dialog.dismiss冲突的解决(Activity has leaked window com.android.internal.policy.impl.PhoneWindow)
当我们在退出整个程序的时候偶尔会出现这种报错:Activity has leaked window com.android.internal.policy.impl.PhoneWindow 其意思大概 ...
- MTK camera 闪光灯Flashlight驱动调试流程
MTK camera 闪光灯Flashlight驱动调试流程 分类: MtkDev | 作者: topicdev 相关 | 发布日期 : 2014-09-26 | 热度 : 153° ...
- Android WiFi开发教程(二)——WiFi的搜索和连接
在上一篇中我们介绍了WiFi热点的创建和关闭,如果你还没阅读过,建议先阅读上一篇文章Android WiFi开发教程(一)——WiFi热点的创建与关闭. 本章节主要继续介绍WiFi的搜索和连接. Wi ...
- WinForm c# 备份 还原 数据库(Yc那些事儿 转)
Yc那些事儿 我愿意 为了我的幸福 奋斗终生 2008-11-17 18:04 WinForm c# 备份 还原 数据库 其实是个非常简单的问题,一个Form,一个Button,一个OpenF ...
- PCB MS SERVER 数据导出与导入操作步骤----使用第3方工具
工作每天都与数据库打交道,经常会遇到一些需要将数据库中的数据导出来或将数据导入到数据库 而用微软数据库客户端自带的功能操作步骤好麻烦的,用过的大家都会有相同的感受吧. 微软客户端不好之处整理:这里吐槽 ...