html零基础必看——html入门，编程就是如此简单
第八章：圆角、阴影、透明属性
一、border-radius 圆角边框属性
1.什么是圆角属性
border-radius圆角属性就相当于是把一个盒模型的一个角或多个角变成一段圆弧（圆角）的边框，就达到了圆角的效果。属性的值就相当于变成这段圆弧的边框的半径。
2.圆角边框属性值取值法：
取值通常使用百分比值 或 像素值 。
- 像素取值法：
四个值：依此作用于（左上|| 右上|| 右下 || 左下）
三个值：依此作用于（左上|| 右上左下 || 右下）
两个值：依此作用于（左上右下 || 右上左下）
一个值：四个角同一值
分解属性值：如左上角：border-top-left-radius
<head>
<title>圆角样式</title>
<link rel="stylesheet" href="rest.css">
<style>
div {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
}
/* 圆角样式 设置一个半径为20像素的圆*/
/* border-radius: 20px; */
.div1 {
border-radius: 20px;
}
/* 四个值 圆角: 左上 右上 右下 左下*/
/* border-radius: 10px 20px 30px 40px; */
.div2 {
border-radius: 10px 20px 30px 40px;
}
/*三个值 第一: 左上 第二: 右上和左下 第三: 右下*/
.div3 {
border-radius: 30px 60px 50px;
}
/* 二个值 左上和右下 右上和左下*/
.div4 {
border-radius: 0px 100px;
}
/* 分解为 单个角的写法 左上角 右上角，右下角，左下角 */
.div5 {
/* 如：左上角 */
border-top-left-radius: 100px;
}
/* 百分比取值法： */
.div6 {
border-radius: 20%;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
效果图：
3.盒模型变为圆或是椭圆
- 当盒模型为正方形时（width=height）
属性值为边长的一半（1/2的width或1/2的height）时，盒模型变为一个圆，即使超过这个值还是这个圆，不再变化；
- 当盒模型为长方形方形时
属性值为较短边长的一半时，盒模型变为一个椭圆，即使超过这个值还是这个椭圆，不再变化；
- 注意：长方形用数值单位px和百分比%是区别的：
用数值px时，表示圆角是以这个数值为半径的边框椭圆，数值超过较短边一半时，椭圆将不再变化；
用百分比时，表示圆角是分别以这个宽和高对应的百分比为半径的边框椭圆，超过50%时，椭圆将不再变化；
<style>
div{
display: inline-block;
width: 300px;
height: 500px;
background: pink;
}
/* 这个盒子是一个长方形，所以设置圆角边框属性肯定是一个椭圆形状
当px像素值表示时，这个圆角（椭圆）的半径是较短边长的一半时，椭圆，达到临界值*/
.div1{
/* 刚好是较短边的一半，所以这个椭圆达到一个临界值，超过这个较短边的一半时，仍然还是这个椭圆临界点不会改变 */
border-radius: 150px;
}
.div2{
/* 这个是较长边的一半，但是它超过这个较短边的一半时，仍然还是这个椭圆临界点不会改变 */
border-radius: 250px;
}
.div3{
/* 而以百分比表示时，表示这个椭圆分别以宽和高的50%分别作为这个椭圆的长半径和宽半径 ，虽然50%也是一半的意思，但是它是同时结合了宽和高两个值，所以和直接写数值的一半椭圆形状不一样*/
border-radius: 50%;
/* 表示这个椭圆是以250半径和150半径的一个椭圆 ，相当于border-radius: 150px 250px;*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
效果图：
<head>
<title>圆和椭圆</title>
<link rel="stylesheet" href="rest.css">
<style>
.one>div {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
}
.two>div{
display: inline-block;
width: 200px;
height: 300px;
background: pink;
}
/* 给盒子变成一个圆或者椭圆 */
/* 1.盒子是正方形时：
圆角的半径设为边长的一半或者设为50% ，盒子变为一个圆*/
.div1 {
border-radius: 100px;
/* border-radius: 50%; */
}
.div2{
/* 注意：当给盒子设置圆角的半径超过边长的一半或者超过50% 时，它还是这个圆 */
/* border-radius: 150px; */
/* border-radius: 80%; */
/* border-radius: 100%; */
border-radius: 200%;
}
/* 2.盒子是长方形时：
（1）圆角的半径设为较短边长的一半时，盒子变为一个椭圆，达到临界值*/
.div3{
border-radius: 100px;
}
.div4{
/* 注意：当超过较短边长的一半时，它还是这个临界点的椭圆，不会改变 */
/* border-radius: 150px; */
border-radius: 200px;
}
/*（2） 圆角的半径设为50%时，盒子变为一个椭圆，椭圆达到另一个临界值 */
.div5{
border-radius: 50%;
}
.div6{
/* 注意：当超过圆角的半径设为50%时，它还是这个临界点的椭圆，不会改变 */
border-radius: 60%;
border-radius: 100%;
}
/* 长方形用数值单位px和百分比%的区别：
圆角边框用数值时，表示圆角是以这个数值为半径的边框椭圆，数值超过较短边一半时，椭圆将不再变化；
圆角边框用百分比时，表示圆角是分别以这个宽和高对应的百分比为半径的边框椭圆，超过50%时，椭圆将不再变化；
*/
</style>
</head>
<body>
<div class="one">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="two">
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</body>
效果图：
二、box-shadow 阴影属性
box-shadow盒子阴影，让盒子四周产生阴影的效果。
- 属性值最少要写两个（前两个是必须要写的）：
box-shadow: 0px 0px 10px 5px teal inset;
第一个值：水平阴影的位置，允许负值；必需要写的
第二个值：垂直阴影的位置，允许负值；必需要写的
第三个值：模糊距离（默认是0），可选
第四个值：阴影的大小，可选
第五个值：阴影的颜色 ，可选
第六个值：默认向外扩散 (可选: 向内扩散 inset)，可选
<head>
<title>阴影</title>
<!-- 为了便于观看阴影就不用引入外部样式清除默认边距了 -->
<style>
.wrap{
width: 200px;
height: 400px;
background-color: pink;
/* 阴影属性 */
box-shadow: 0px 0px 10px 5px teal inset;
/*
第一个值: 阴影左右位置 (必须)
第二个值: 上下位置 (必须)
第三值: 模糊距离 (可写 默认是0 )
第四值: 模糊度扩散距离(阴影大小) (可写 默认是0)
第五值: 阴影颜色 (可选 默认是黑色)
第六值: 默认向外扩散 (可选: 向内扩散 inset)
*/
}
.text{
/* 文字阴影 也是一样必须写上前面两个值 */
text-shadow: 10px 10px 10px yellow;
/* text-shadow: 1px 1px 2px pink; */
}
</style>
</head>
<body>
<div class="wrap">
</div>
<p class="text">
我是文字 我的影子呢
</p>
</body>
效果图：
三、opacity 元素透明度属性
属性值：
- 数字取值 0（完全透明） ~ 1（完全不透明）
- inherit Opacity属性的值应该从父元素继承
<style>
.div1{
/* 不设置高度，高度由内容撑开 */
width: 300px;
background-color: pink;
opacity: 0.5;
margin-bottom: 50px;
}
.div2{
/* 设置高度，让部分内容溢出 */
width: 300px;
height: 50px;
background-color: pink;
opacity:0.7;
}
p{
background-color: rebeccapurple;
width: 100px;
margin: auto;
opacity: inherit;
}
/* opacity属性：设置元素的透明度，属性值：
数字取值 *0*（完全透明） ~ *1*（完全不透明）
inherit Opacity属性的值应该从父元素继承
*/
</style>
</head>
<body>
<div class="div1">
This element's opacity is 0.5! Note that both the text and
the background-color are affected by the opacity level!
</div>
<div class="div2">
This element's opacity is 0.5! Note that both the text and
the background-color are affected by the opacity level!
<p>我从父级继承opacity属性</p>
</div>
</body>
效果图：
总结
上述是小编为大家整理的一些圆角属性、如何把一个盒子变成圆形盒子以及椭圆形盒子、元素的阴影属性、以及元素的透明属性等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。