css3实现圆角效果
来源：互联网 发布：java json解析框架 编辑：程序博客网 时间：2024/06/07 02:26
以下为圆角各种情况的代码；
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
</script>
</head>
<style>
div{margin-bottom: 5px;}
.bgradio{width:100px;height: 100px;background: red;border-radius: 5px;}
.boradio{width:100px;height: 100px;border:1px solid #ccc;border-radius: 5px;}
.imgradio{width:100px;height: 100px;border-radius: 5px;background: url(images/wall1.jpg);}
.topradio{width:100px;height: 100px;border-radius: 5px 5px 0 0;border: 1px solid #ccc;}
.botpradio{width:100px;height: 100px;border-radius: 0 0 5px 5px;border: 1px solid #ccc;}
</style>
<!--
有背景颜色 有边框 有背景图片 指定每个圆角
-->
<body>
<!--有背景颜色的圆角-->
<div class="bgradio"></div>
<!--有边框的圆角-->
<div class="boradio"></div>
<!--有背景图片的圆角-->
<div class="imgradio"></div>
<!--顶端为圆角的-->
<div class="topradio"></div>
<!--底端为圆角的-->
<div class="botpradio"></div>
</body>
</html>
我自己也是刚学习不长时间；css3圆角虽然简单；但用途不少，希望可以帮到你们；
0 0
- CSS3 实现圆角效果
- css3实现圆角效果
- 纯CSS3实现圆角效果
- CSS3实现折角效果
- CSS3实现DIV圆角效果完整代码
- CSS3如何实现圆角的outline效果
- 小tip: CSS3如何实现圆角的outline效果？
- css3实现闪光效果
- css3实现按钮开关效果
- CSS3实现折纸效果
- css3实现手风琴效果
- css3实现冲击波效果
- CSS3实现气泡效果
- CSS3实现轮播图效果
- Css3实现三角效果
- css3实现幻灯片效果
- CSS3实现三角形效果
- css3实现翻牌效果
- Linux命令汇总
- 设计原则之接口隔离原则
- 360反馈自动提交
- ( 14 ) : 在公有类中使用访问方法而非公有域
- 在android手机上打开html文件
- css3实现圆角效果
- android 通过广播监听网络连接状况
- GITLAB 环境搭建
- 对象流
- 基于 Spring MVC 的开源项目，方便黑盒测试的测试管理系统
- QuickHit项目
- swift中tableView导航栏渐变和下拉变大效果
- 最近频繁用到正则表达式，恶补一下，高手略过（零宽断言）
- 深入MTK平台bootloader启动之【 lk -> kernel】分析笔记
