关于css3的边框的border-radius和border-image用法的详解
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: red;
border-radius: 100px 0 100px 0/100px 0 100px 0;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: red;
border-radius: 0 0 0 50px/0 0 0 50px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width: 200px;
height: 100px;
background-color: red;
border-radius: 100px/50px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width: 0px;
border-radius: 100px;
border:100px solid #ccc;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 300px;
width: 300px;
border-width: 50px;
border-image: url(1.png) 166 round;
background: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 300px;
width: 300px;
border-width: 50px;
border-image: url(1.png) 100% round;
background: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
关于css3的边框的border-radius和border-image用法的详解的更多相关文章
- CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 绝对干货!!css3字体图标—丰富的阿里图标库iconfont的使用详解
在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...
- CSS3新单位vw、vh、vmin、vmax使用详解
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...
- CSS3 - 新单位vw、vh、vmin、vmax使用详解
参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 第93天:CSS3 中边框详解
CSS3 边框详解 其中边框圆角.边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握. 一.边框圆角 border-radius 每个角可以设置两个值 ...
随机推荐
- javascript动态创建对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (转)Java字符串应用之密码加密与验证
1.通过java.Security.MessageDigest的静态方法getInstance创建具有指定算法名称的信息摘要,参数为算法名,传入”MD5“则表示使用MD5算法 2.Message ...
- 垃圾回收器 Dispose 和 Finalize 的互补作用
假如我们程序有两个窗口 Form1.Form2; 当我们关闭一个窗口的时候,会发出一个 终止响应,并将该窗口对象送入终止队列,公共语言运行库的垃圾回收器跟踪着这个对象的生存期,此时就会调用此对象的基类 ...
- Java并发编程小记
1. Semaphore 信号量是一种计数器,用来保护一个或者多个共享资源的访问.如果线程要访问一个共享资源,必须先获得信号量.若内部计数器大于0,则减1,若等于0,则线程进入休眠直至计数器大于等于0 ...
- javabean对象自动赋值给另一个javabean对象
方法1:把JavaBean的from的值自动set给to,省略了自己从from中get然后再set给to import java.beans.BeanInfo;import java.beans.In ...
- 初识HTML5
1, 新增canvas标签,允许通过JS在客户端完成2D绘图 2, 新增Video/Audio标签,能取代flash实现媒体播放 3, 新增本地存储功能:localStorage/sessionSto ...
- Nginx 变量漫谈(八)
与 $arg_XXX 类似,我们在 (二) 中提到过的内建变量 $cookie_XXX 变量也会在名为 XXX 的 cookie 不存在时返回特殊值“没找到”: location /test ...
- ASP.NET C# 有程序集加不了解决办法
在项目中添加app.config 获取在 web.config 添加 <?xml version="1.0"?> <configuration> <s ...
- Oracle EBS-SQL (MRP-6):检查MRP计划运行报错原因之超大数据查询1.sql
/*逐一运行检查计划运行超大数据*/ ---------------------------------------------------- /*查询-1*/ select plan_id, 'C ...
- QT VS配置UNICODE问题
默认情况下,使用VSQT插件 导入.pro后,会自动在项目文件里面预定义好宏UNICODE,可以把该宏去掉,以免造成其他程序,使用多字节的代码出错 去除的两个方法 1.打开Propject->P ...