border-radius__边框圆角
1、四个参数:
border-radius: 值1 值2 值3 值4;顺序:从左开始,顺时针顺
div{
width: 200px;
height: 100px;
background-color: blue;
margin: 50px;
border-radius: 10px 20px 30px 40px;
}
2、两个参数:
border-radius: 值1 值2; 顺序:上左下右,上右下左
div{
width: 200px;
height: 100px;
background-color: blue;
margin: 50px;
border-radius: 200px 200px 0 0;
}
3、半圆的形成
border-radius: 200px 200px 0 0;向上的半圆 高度要减半
div{
width: 200px;
height: 100px;
background-color: blue;
margin: 50px;
border-radius: 200px 200px 0 0;
}

注:border-radius: 0 0 200px 200px ;向下的半圆 高度要减半

border-radius__边框圆角的更多相关文章
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- SilverLight:布局(1) Border(边框)对象、Grid(网格)对象
ylbtech-SilverLight-Layout:布局(1) Border(边框)对象.Grid(网格)对象 A, Border(边框)对象 B, Grid(网格)对象 C, Grid(网格)对象 ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- CSS3 -- 边框圆角
文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- border 外边框
语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...
- css3实现边框圆角样式
基本语法: border-radius: 5px; 兼容大多数浏览器: /*兼容Mozilla(Firefox, Flock等浏览器)*/ -moz-border-radius-topleft: ...
随机推荐
- 浅谈回归(二)——Regression 之历史错误翻译
我很好奇这个问题,于是搜了一下.我发现 Regression 这个词 本意里有"衰退"的意思. 词根词缀: re- 回 , 向后 + -gress- 步 , 级 + -ion 名词 ...
- 【Android】Warning :uninstalling will remove the application data!
最近从Android Studio向手机发布项目过程中经常出现, 问题虽小,但是开发过程中确实浪费时间. It is possible that issue is resolved by uninst ...
- 使用原生的javascript来实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react-native-splash-screen
react-native-splash-screen在GitHub上的地址:https://github.com/crazycodeboy/react-native-splash-screen rea ...
- 【NLP_Stanford课堂】语言模型3
一.产生句子 方法:Shannon Visualization Method 过程:根据概率,每次随机选择一个bigram,从而来产生一个句子 比如: 从句子开始标志的bigram开始,我们先有一个( ...
- PowerDesigner表设计转化为excel或者markdown
本文目的:知道有这种能够写脚本的方式减少工作量 写VBS脚本 导出
- MEGER sentence in oracle
MEGE Sentence This oracle tutorial explains how to use the oralce MEGER sentence with syntax and sam ...
- Android webview 点击超链接打开新的webview
webview.setWebViewClient(new webViewClient() { HitTestResult hit = view.getHitTestResult(); if (hit ...
- 2014年百度之星资格赛第一题Energy Conversion
Problem Description 魔法师百小度也有遇到难题的时候-- 如今.百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这样的魔法文字须要耗费大量的能量和大量的脑力. 过了许久 ...
- Perl中的字符串操作函数
1.$position = index(string,substring,skipchars): 该函数返回子串substring在字符串string中的位置,如果不存在,则返回-1:参数skipch ...