css3中的圆角border-radius
css3的属性应该加上浏览器前缀
不同的浏览器内核不同，因此css的前缀不同。
常见的几种浏览器内核
火狐浏览器 Geoko内核 前缀是 -mox-
谷歌浏览器， Webkit内核 前缀是 -wekbit-
IE浏览器 Trident内核 前缀是 -ms-
opera浏览器 Presto内核 前缀是 -o-
文字描边
<style>
* {
padding: 0;
margin: 0;
}
div {
font-size: 50px;
/* 颜色是无色，描边成为淡红色 */
-webkit-text-stroke: 1px #f00;
color: transparent;
}
</style>
<div>好好学习</div>
圆角圆角的完整格式
<style>
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 圆角的完整格式：斜线的左边表示的是水平位置4个值； 斜线的右边表示的是垂直位置4个值 */
/* 分别表示的是顶部水平左上角，顶部水平右上角， 底部水平的右上角, 底部的水平左上角 / 顶部垂直左上角，顶部垂直右上角， 底部垂直的右上角, 底部的垂直左上角 */
border-radius: 10px 30px 40px 50px / 10px 30px 40px 50px;
}
</style>
<body>
<div>雪月剑仙-李寒衣</div>
</body>
圆角 border-radius 4个参数
<style>
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 左上角水平和垂直，右上角水平和垂直，右下角水平和垂直， 左下角水平和垂直*/
border-radius: 10px 20px 30px 40px;
}
</style>
<body>
<div>雪月剑仙-李寒衣</div>
</body>
圆角 border-radius 2个参数
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 左上角和右下角的水平和垂直， 右上角和左下角的水平和垂直 */
border-radius: 10px 20px;
}
圆角 border-radius 1个参数
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 4个角的水平和垂直都是10px */
border-radius: 10px ;
}
border-radius: 0px;表示的没有圆角哈。
css3中的圆角border-radius的更多相关文章
- css3中的圆角属性
圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: ...
- 如何在html中做圆角矩形和 只有右边的"分隔线"
这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具 其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具 debugger正则表达式在线 其实是对(理论 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
- CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）
matrix CSS3 1. 圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...
- CSS3 中border-image详解
CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...
- CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
- CSS3中的新特性
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...
- css3-10 css3中的边框样式有哪几种
css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...
- CSS3边框与圆角
1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...
- css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
随机推荐
- TypeScript里string和String，真不是仅仅是大小写的区别
摘要:通常来说,string表示原生类型,而String表示对象. 本文分享自华为云社区<TypeScript里string和String的区别>,作者:gentle_zhou . 背景 ...
- 火山引擎 DataLeap 构建Data Catalog系统的实践（一）：背景与调研思路
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 摘要 Data Catalog 产品,通过汇总技术和业务元数据,解决大数据生产者组织梳理数据.数据消费者找数和理解 ...
- 火山引擎 DataTester：在广告投放场景下的 A/B 实验实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 "我知道在广告上的投资有一半是无用的,但问题是我不知道是哪一半." --零售大亨约翰·沃纳梅克 ...
- Winform 嵌入html，数据交互
Winform 嵌入html,数据交互,将JS中的数据等传给winform 点击浏览器中的按钮,触发 Winform 中的方法 https://github.com/cefsharp/CefSharp ...
- 【HZERO】数据导入
#数据导入 ##文档整理 通用导入客户端 https://open.hand-china.com/hzero-docs/v1.3/zh/docs/service/import/import/ 开放平台 ...
- 使用nginx代理emqx的TCP、WS、WSS连接请求
项目代理关系: 注:主机上已存在名为:nginx-proxy 的一级 nginx 的代理,将监听了主机的 80.443端口 docker-compose.yml version: "3.7& ...
- Windows10/11 wsl2 安装 ArchLinux 子系统
这篇文章针对的是在win11系统的wsl2下安装ArchLinux系统,网上很多中文教程都是使用LxRunOffline去做的,但是实际上该方法已经过时了,目前有更加先进的ArchWSL方式. 如果用 ...
- SCOI2005 互不侵犯 (状态压缩入门题）
使用状态压缩,最好了解 位运算使用 SCOI2005 互不侵犯 在 \(N\times N\) 的棋盘里面放 \(K\) 个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左 ...
- 【驱动】SPI驱动分析(二)-SPI驱动框架
SPI驱动框架 SPI驱动属于总线-设备-驱动模型的,与I2C总线设备驱动模型相比,大体框架是一样,他们都是实际的总线.总体框架如下图所示: 从上到下,分为三层,用户空间,内核空间,和硬件层. 用户空 ...
- C#开源跨平台的多功能Steam工具箱&GitHub加速神器
前言 作为一个程序员你是否会经常会遇到GitHub无法访问(如下无法访问图片),或者是访问和下载源码时十分缓慢就像乌龟爬行一般.今天分享一款C#开源的.跨平台的多功能Steam工具箱和GitHub加速 ...