Una lectura obligada para conocer los conceptos básicos de HTML: comenzar con HTML, la programación es muy simple
Capítulo 8: Esquinas redondeadas, sombras y propiedades de transparencia
1. atributo de borde redondeado de radio de borde
1. ¿Cuál es el atributo de esquinas redondeadas?
El atributo de esquina redondeada de radio de borde equivale a convertir una o más esquinas de un modelo de caja en un borde de arco (esquina redondeada), logrando así el efecto de esquinas redondeadas. El valor del atributo es equivalente al radio del borde que se convierte en este arco.
2. Cómo determinar el valor del atributo de borde redondeado:
El valor suele utilizar un valor porcentual o un valor de píxel.
- Método de valor de píxel:
Cuatro valores : actuar sobre ( superior izquierda|| superior derecha|| inferior derecha|| inferior izquierda )
Tres valores : actuar sobre ( superior izquierda|| superior derecha e inferior izquierda|| inferior derecha )
Dos valores : actuar sobre ( superior izquierda Inferior derecha|| Superior derecha e inferior izquierda )
un valor : el mismo valor en las cuatro esquinas
valor del atributo de descomposición : como esquina superior izquierda: borde-arriba-radio-izquierda
<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>
Representación:
3. El modelo de caja cambia a un círculo o elipse.
- Cuando el modelo de caja es cuadrado (ancho = alto)
Cuando el valor del atributo es la mitad de la longitud del lado (1/2 ancho o 1/2 alto), el modelo de caja se convierte en un círculo, incluso si excede este valor, seguirá siendo un círculo y no cambiará;
- Cuando el modelo de caja tiene forma rectangular.
Cuando el valor del atributo es la mitad de la longitud del lado más corto, el modelo de caja se convierte en una elipse, incluso si excede este valor, seguirá siendo una elipse y no cambiará;
- Nota: Existe una diferencia entre la unidad numérica px y el porcentaje % para un rectángulo:
Cuando se usa el valor px, significa que el filete es una elipse de borde con este valor como radio. Cuando el valor excede la mitad del lado más corto, la elipse ya no cambiará; cuando se usa porcentaje, significa que el filete se
basa en el porcentaje correspondiente al ancho y alto respectivamente. Cuando el radio de la elipse del borde excede el 50%, la elipse ya no cambiará;
<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>
Representación:
<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>
Representación:
2. atributo de sombra de sombra de cuadro
box-shadow box shadow crea un efecto de sombra alrededor del cuadro.
- Se deben escribir al menos dos valores de atributo (los dos primeros son obligatorios):
box-shadow: 0px 0px 10px 5px teal inset;
El primer valor: la posición de la sombra horizontal, se permiten valores negativos; se requiere escribir
El segundo valor: la posición de la sombra vertical, se permiten valores negativos;
el tercer valor que se requiere escribir: distancia de desenfoque (el valor predeterminado es 0), opcional Seleccione
El cuarto valor: el tamaño de la sombra, opcional
El quinto valor: el color de la sombra, opcional
El sexto valor: Difusión hacia afuera predeterminada (opcional: inserción de difusión hacia adentro), opcional
<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>
Representación:
3. Atributo de transparencia del elemento opacidad.
El valor de la propiedad:
- El número va del 0 (completamente transparente) al 1 (completamente opaco)
- El valor del atributo heredado de opacidad debe heredarse del elemento principal.
<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>
Representación:
Resumir
Lo anterior es una explicación relativamente detallada de algunos atributos de esquinas redondeadas compilados por el editor para todos, cómo convertir un cuadro en un cuadro redondo y un cuadro ovalado, el atributo de sombra de los elementos y el atributo transparente de los elementos, etc., combinados. con casos relacionados. Fue compilado con referencia a varias fuentes y a mi propio entendimiento. Si puede haber inexactitudes u omisiones, espero que puedan iluminarme y hacer correcciones. Me gustaría agradecerles de antemano.