css新增属性
- 圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
// 如果是两个数字,则左上角和右下角一样,右上角和左下角一样
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}
</style>
</head>
<body>
<div class="box"></div>
</body><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
// 100px/150px表示每个角的水平和垂直,同时可以前面四个/后面四个,则分别表示四个角的水平和四个角的垂直
.box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 边框背景
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}
</style>
</head>
<body>
<div class="box"></div>
</body>- 线性渐变
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
</style>
</head>
<body>
<div class="box"></div>
</body> - 可以设置多个背景
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;}
</style>
</head>
<body>
<div class="box"></div>
</body> - border-image:边框图片
- border-image-source: 引入图片
- border-image-slice: 切割图片
- border-image-width: 边框宽度
- border-image-repeat: 图片的排列方式(round 平铺, repeat 重复, stretch 拉伸)
- border-colors:边框颜色
- 背景尺寸: background-size: x, y (100% 100%)
- background-origin: border | padding | content -box,分别表示从border区域开始显示背景,从padding区域开始显示背景,从content区域开始显示背景
- border-clip : border(从border区域向外裁剪背景), padding(从padding区域向外裁剪背景),content(从content区域向外裁剪背景)
- 遮罩
css新增属性的更多相关文章
- css新增属性之边框
css3新增属性 边框属性 背景属性 文字属性 颜色属性 边框属性 属性 说明 border-radius 设置边框圆角 border-image 设置图像边框 border-shadow 设置边框阴 ...
- 背景新增属性和css渐变及倒影
背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- HTML5新增属性
[sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...
- 第七篇、CSS3新增属性
<!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...
- Css新增内容
css3新增属性 可节省设计时间的属性 border-color:控制边框的颜色,并且有更大的灵活性,可以产生渐变效果 border-image:控制边框图像 border-radius:能产生类似圆 ...
随机推荐
- Centos7下Intel与AMD双显卡驱动的安装
前2天,在Nvidia单显卡上成功安装上了NVIdia的驱动,一时兴起,拿出另外的一个HP笔记本也准备装上驱动,悲催的是HP的显卡是AMD的,更加.更加悲催的是还是Intel+AMD的双显卡.网络 ...
- php中json_decode()和json_encode()
1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL json >= 1.2.0) json_decode — 对 JSON 格式的字符串进行 ...
- JS小技巧大本事(持续更新)
1. 复制N个字符 String.prototype.repeat = function(num){ return (new Array(++num)).join(this); } var a = ' ...
- 机器学习(4)之Logistic回归
机器学习(4)之Logistic回归 1. 算法推导 与之前学过的梯度下降等不同,Logistic回归是一类分类问题,而前者是回归问题.回归问题中,尝试预测的变量y是连续的变量,而在分类问题中,y是一 ...
- UGUI穿透3D世界判断&&UGUI全事件监听
public bool isPointUI(){ PointerEventData eventDataCurrnt = new PointerEventData (EventSystem.curren ...
- Android调用Asp.net Web Service示例
WebService代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- h.264码率控制
h.264的码流传输是基于目前有限的网络带宽来进行的,以目前的压缩效率来说,运动不算剧烈.细节不多的影像,在720p的情况下,1000kbps压缩损耗较少(psnr较大),能达到比较好的观赏效果,10 ...
- 【转】在linux内核中读写文件 -- 不错
原文网址:http://blog.csdn.net/tommy_wxie/article/details/8194276 1. 序曲 在用户态,读写文件可以通过read和write这两个系统调用来完成 ...
- Python HiveServer2
1. 安装pyhs2 pyhs2依赖项如下: gcc-c++ python-devel.x86_64 cyrus-sasl-devel.x86_64 因此pyhs2的安装命令如下: ...
- CCF NOIP2015复赛获奖分数线及名额分配办法
CCF NOIP2015复赛获奖分数线及名额分配办法 中国计算机学会CCF NOI竞赛委员会.科学委员 ...