border-radius实例2
一、border-radius 最大值100%
/* border-radius的最大值是100% */
.block {
width: 100px;
height: 100px;
border: 1px solid red;
/* border-radius: 10px 10px 100% 100%; */
border-radius: 10px 10px 200px 200px;
}

二、使用大圆拼凑更多边角效果示例:
注:微信抢红包页面背景效果可以使用这种方式
css代码:
.block {
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 10px;
margin: 100px 0px 0px 100px;
position: relative;
overflow: hidden;
}
.blocktop {
width: 200%;
height: 200%;
border: 1px solid blue;
border-radius: 50%;
margin-top: -150%;
margin-left: -50%;
background: blue;
position: relative;
overflow: hidden;
}
.blocktop .blockInner {
width: 50%;
height: 25%;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
.blocktop img {
width: 100%;
}
html的结构:
<div class="block">
<div class="blocktop">
<div class="blockInner">
<img src="http://beijing.gongjuji.net/imgdata/small/e6e7b778-0e0e-452f-80aa-f95f94690fab.jpg" alt="">
</div>
</div>
</div>
显示效果:

更多:
border-radius实例2的更多相关文章
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
- iOS图形处理和性能(转)
在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [ ...
- iOS图形处理和性能
转自陶丰平的博客 原文的题目是Designing for iOS: Graphics & Performance,晚上花了两个不到小时大致翻译了下. ---Begin--- 在之前的文章里 ...
- 微信小程序弹出可填写框两种方法
方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...
- jquery toast插件
插件描述:Toaster.js是一款Material Design风格jquery toast插件.Toaster.js提供5种主题,以及众多配置参数,用于显示toast类型的消息提示框.兼容性如下: ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- 如何高效的阅读uni-app框架?(建议收藏)
作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...
- css 边框和圆角
CSS3圆角 border-radius属性 一个最多指定四个border -*- radius复合属性,这个属性允许你为元素添加圆角边框 语法 border-radius:1-4 length|% ...
- vue 表格组件分享
分享一款自己写的table组件 用起来还算简单好用 (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...
随机推荐
- mockjs的基本使用入门
相信很多前端同学都有一个困扰,就是没有后端数据的情况下感觉很多想法都不能动手去实现,这里介绍一个模拟后端数据的工具,可以一定程度上解决我们的困扰. 很多人或多或少的都听说过mockjs,都知道是一个模 ...
- Python实现的贪婪算法
个州的听众都收听到.为此,你需要决定在哪些广播台播出.在每个广播台播出都需要支出费用,因此你力图在尽可能少的广播台播出 # 1.创建一个列表,其中包含要覆盖的州 states_needed = set ...
- angular8 打包时 文件过大 导致内存溢出解决方案(记录)
在package.json 中添加 "scripts": { "ng": "ng", "start": "ng ...
- 转:spring mvc 设置@Scope("prototype")
spring中bean的scope属性,有如下5种类型: singleton 表示在spring容器中的单例,通过spring容器获得该bean时总是返回唯一的实例prototype表示每次获得bea ...
- 【转】大众点评CAT开源监控系统剖析
https://www.cnblogs.com/yeahwell/p/cat.html 参考文档: 大众点评的实时监控系统分析(一) CAT_source_analyze 透过CAT,来看分布式实时监 ...
- Statefulset:部署有状态的多副本应用
10.1.什么是Statefulset StatefulSet是Kubernetes提供的管理有状态应用的负载管理控制器API. 特点: 1.具有固定的网络标记(主机名) 2.具有持久化 ...
- NumPy基本操作快速熟悉
NumPy 是 Python 数值计算非常重要的一个包.很多科学计算包都是以 NumPy 的数组对象为基础开发的. 本文用代码快速过了一遍 NumPy 的基本操作,对 NumPy 整体有一个把握.希望 ...
- 使用Python音频双通道分离
某些音频是双方对话,有可能需要对音频作通道的分离. 示例代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- """ 音 ...
- ANDROID - 打包和引用本地的AAR
打包方法: 打开Gradle面板 Gradle Projects: 选择Library对应的Gradle Task,比如:":testsdk": 依次 Tasks > ...
- ES6 手册
不用就忘, 把阮大大的地址列在这儿: http://es6.ruanyifeng.com/#README