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 ...
随机推荐
- HTML5 表单新增内容
一.H5 新增控件 1.datalist 元素 datalist 标签定义选项列表,请与 input 元素配合使用该元素.可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行 ...
- python小项目之文本编辑器
高考完后这么久才想起这系列教程,实在抱歉,现在该来继续教程了. 本节利用前面所学知识,来完成一个小工具--文本编辑器! tkinter 在实现文本编辑器之前,先来了解下tkinter这个python库 ...
- 12 ARM汇编
Android系统采用java作为平台软件基础开发语言,NDK使Android平台可以运行C/C++代码这些代码汇编成ARM的elf可执行文件. 原生程序生成过程 经历4步:1.预处理2.编译3.汇编 ...
- .Net core 使用swagger进行Api管理
上次我们讲过如何在swagger上隐藏接口,众所周知,swagger是一个强大的api文档工具,可以帮助我们记录文档并且测试接口,也是一个可视化操作接口的工具. 那么如果我们写的接口非常多的时候怎么办 ...
- go mod开发模式设置
文章要解决的仅仅是一个问题 当你使用go get 无论如何get不到所需的包的问题 第一步就是下载goland 新手极其推荐goland,因为直接使用gland几乎没有挫败感,使用其他工具可能要折腾好 ...
- datetime,Timestamp和datetime64之间转换
引入工具包 import datetime import numpy as np import pandas as pd 总览 from IPython.display import Image fr ...
- 软件测试之Monkey 初步了解(入门级II)
1. 先熟悉monkey基本命令: cls 清除 首先测试设备是否连接成功,在命令行中输入:adb devices 查看adb版本: adb version 查看虚拟机版本:nox_adb ver ...
- maven中jar冲突解决
Maven中jar包冲突是开发过程中比较常见而又令人头疼的问题,我们需要知道 jar包冲突的原理,才能更好的去解决jar包冲突的问题.本文将从jar包冲突的原理和解决两个方面阐述Maven中jar包冲 ...
- ie下的透明度,用滤镜filter:alpha
.box{ width:100px; height:100px; background-color:#000; filter:alpha(Opacity=50); opacity: 0.5; }
- 【C/C++】指针
指针定义 指针是一个变量,其值为另一个变量的地址,即,内存位置的直接地址.就像其他变量或常量一样,必须在使用指针存储其他变量地址之前,对其进行声明.指针变量声明的一般形式为: type *var-na ...