html 给照片添加圆角属性,CSS3新增属性(背景图、边框背景、圆角)
1、Background-size 背景尺寸
说明:background-size 规定背景图像的尺寸
属性值
length (10px)
规定背景图的大小。第一个值宽度,第二个值高度。(直接定义背景图的大小)
Percentage(%)
以百分比为值设置背景图大小(参照元素的大小)
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
contain
把图像图像扩展至最大尺寸,以使其宽度或高度完全适应内容区域。
复合式写法:background: url(img/laoli.jpg) no-repeat 0 0/cover;
说明:backgroun-size和background-position要用 “ / ” 组成一个属性值一起写;
2、background-origin 背景原点(起始点)位置
说明:指定background-origin属性应该是相对位置
属性值
padding-box背景图像填充框的相对位置 (从padding区开始显示背景图)默认值
border-box 背景图像边界框的相对位置(从边框区开始显示背景图)
content-box背景图像的相对位置的内容框 (从内容区开始显示背景图)
3、background-clip 背景裁切
说明:background-clip 属性规定背景的绘制区域。
属性值
border-box背景被裁剪到边框盒。 默认值
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
扩展:text: 背景被裁剪到文字。说明:-webkit-background-clip: text; 使用时要加浏览器前缀
4、添加多张背景图:
语法:background:url(),url();
background:url(img/corner_lt.gif) no-repeat left top,
url(img/corner_rt.gif) no-repeat right top,
url(img/corner_rb.gif) no-repeat right bottom,
url(img/corner_lb.gif) no-repeat left bottom;
background-color:#63ceff;
5、模糊:blur
filter : blur(value)
说明:值越大,越模糊;
6、图片边框属性:
border-image 属性是一个简写属性,用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。
border-image-repeat图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset边框图像区域超出边框的量(值是一个倍数或者具体的数值)
7、CSS圆角属性:
Border-radius:
语法:border-radius: 20px; 代表每个角的X轴的弧度和Y轴的弧度是一样的;
语法:border-radius: 20px/50px; 代表每个角的X轴的弧度是20px,Y轴的弧度是50px;
说明:10px 20px 30px 40px/50px 40px 30px 20px; “/ ”前表示X轴的弧度 ;“/ ”后 表示Y轴的弧度
用法: border-radius: 10px; 四个角的值都是10px;
border-radius: 10px 20px; 值1:左上和右下 ;值2 :右上和左下
border-radius: 10px 20px 30px ; 值1:左上 ;值2 :右上和左下 ;值3:右下;
border-radius: 10px 20px 30px 40px ; 值1:左上 ;值2 :右上和 ;值3:右下; 值 4:左下
8、css3 calc()(四则运算)
说明:width:calc(100% - 200px);
width:calc(100% - 200px);
注:运算符前后必须要留空格;
+ - * /
加法和减法直接写数值就好;
乘法和除法 要写倍数 不用加单位 ;
9、pointer-events:阻止鼠标事件 、 穿透效果
pointer-events:none;
Like
Like
Love
Haha
Wow
Sad
Angry
html 给照片添加圆角属性,CSS3新增属性(背景图、边框背景、圆角)相关推荐
- css3有哪些新增属性,CSS3新增属性
本篇文章为大家介绍一些CSS3新增的属性,CSS3新属性的出现弥补了CSS2版本的不足,解决了很多我们设置元素样式时的痛点. 1.文本阴影属性 text-shadow:水平距离 垂直距离 模糊半径(模 ...
- CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角.盒阴影.字阴影 人生没有白走的路,每一步都算数. 一.圆角 border-radius:; 取值px % border-radius: 50%; 画一个圆 二.盒阴影 box- ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
- css3新增属性有哪些?css3中常用的新增属性
** 一.css3新增边框属性 ** 1.css3新增属性之border-color:为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0 ...
- 不是css3新增的技术,css3新增属性有哪些?css3中常用的新增属性总结,分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...
- H5新增标签、CSS3新增属性总结
一.H5新增标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- HTML5新增标签及CSS3新增属性
一.h5新增标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
- 前端基础(13):CSS3新增属性和选择器
学习目标 1.CSS3的概念.优势及应用 2.渐进增强和优雅降级的简介 3.CSS3部分新增选择器的语法及应用 4.CSS3的新增属性语法及应用 一.CSS3的概念.优势及应用 CSS3是css技术的 ...
最新文章
- java和python的比较-java学习笔记(与python对比来学)
- java多个按钮监听,如何改成监听多个按钮啊用e.getsource()
- Android之PhotoView使用(原创)
- 2018年最受大家欢迎的五大机器学习工具和五大数据学习工具
- Swift 面向协议编程 基础篇 (一) 介绍
- AI 硬件产品如何进行创新突围?
- 对中级Linux用户有用的20个命令
- grid++中打印表格时怎么让每页有打印表头_一张表学习EXCEL(七):打印也有方法...
- linux下批量修改文件名称
- HBuilderX安装教程
- 编写一个压缩软件(Java实现版本)
- 《Scrum实战》第3次课【富有成效的每日站会】作业汇总
- 英语中提醒注意安全句子
- win10, cuda 9.0, python 3.5环境下复现 Flow-Guided Feature Aggregation for Video Object Detection 问题总结
- 关于html5外文翻译三千字,论文外文文献翻译3000字左右.pdf
- 博学谷java百度网盘_博学谷javaee在线就业班2020网盘
- IAR Embedded Workbench 破解方法+工具+授权文件
- java自学:Severlet和HTTP请求协议
- java的起源于诞生!
- 千人规模组织级 DevOps 演进的 9 个实践及技巧