CSS 基础知识简介：边框和圆角

terry 2年前 (2023-09-28) 阅读数 275 #数据结构与算法

border

在 CSS 中使用 border 来指定边框属性。

边框语法：border:[宽度][样式][颜色]

其中：

宽度：边框宽度，单位可以是px、em、rem等单位或thin、medium、thick三个预设值

style：边框样式，取值可以是solid（实线）、dashed（虚线）、dotted（虚线）等样式。
样式值含义
全全
虚线虚线
点线点线

color：边框颜色，可以使用英文颜色名称，十六进制值、RGB、RGBA等方式指定

示例

创建一个宽度为1px、实线类型、红色边框颜色的盒子。

<style>  .box {    width: 200px;    height: 200px;    margin: 0 auto;    border: 1px solid red;  }</style>
<body>  <div class="box"></div></body>

分别代表宽度、线型、边框颜色

边框三个元素可以拆成小属性进行替换。

border-width：边框宽度。

border-style：边框样式（线型）。

border-color：边框颜色。

示例

border-width: 2px;border-style: dashed;border-color: blue;

分别表示每个方向的边框

border属性可以通过指定四个方向的值来分别表示每个边框的样式。

属性	含义
border-top	上边框
border-dno	右边框
border-bottom	Bot汤姆边框
边框左	左边框

介绍四种边框属性

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>演示四个边框属性</title>
    <style>      .box1 {        width: 100px;        height: 100px;        border-top: 2px solid red;        border-bottom: 3px dotted green;        border-left: 3px dashed yellowgreen;        border-right: 2px solid #89d8de;      }</style>  </head>  <body>    <div class="box1"></div>  </body></html>

分别指定每个边框的样式、线型、颜色

CSS 中提供了多种边框设置的详细属性。

以下属性可以设置每个边框的样式、线型和颜色。属性 top-border-color

right-border-widthright-border-widthright-border-styleright-border linestyleright-border-colorright-边框颜色边框-底部-宽度边框-底部样式边框-底部-底部样式边框-底部-底部样式边框-底部颜色边框-Bottom-Color Border -left-width 定义完所有div标签框的样式后，我们要微调class="box"属性的上边框的样式。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>边框小属性演示</title>    <style>      div {        width: 200px;        height: 200px;        border: 2px solid green;      }
      .box {        border-top-width: 2px;        border-top-color: red;        border-top-style: dotted;      }</style>  </head>  <body>    <div class="box"></div>  </body></html>

删除边框

边框：无；删除所有框边缘（默认值）。

border-left:none：删除字段左侧的边框。

边框顶部：无；删除字段的顶部边缘。

右边框：无；删除字段的右边缘。

边框底部：无；取下盒子底部的装饰。

示例

删除框的左边框

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>去掉盒子的左边框</title>    <style>      div {        width: 200px;        height: 200px;        background-color: orange;        border: 3px solid red;      }
      .box {        border-left: none;      }</style>  </head>  <body>    <div class="box"></div>  </body></html>

圆角

使用 border-radius 属性在 CSS 中设置圆角。常用单位：px、百分比等。

语法

# 如果只指定一个值，表示四个角都使用该值。border-radius: 10px;# 如果有两个值， 第一个值作用在左上角 和 右下角 ， 第二个值作用在 右上角 和 左下角border-radius: 20px 50px;# 如果有三个值， 第一个值作用在左上角 ，第二个值作用在右上角 和 左下角 ， 第三个值适用于右下角border-radius: 15px 50px 30px;# 如果有四个值， 第一个值 左上角， 第二个值 右上角， 第三个值 右下角 ， 第四个值适用于左下角border-radius: 15px 50px 30px 5px

在一个方框中，当我们使用以下属性时

border-radius: 10px;

我们实际上构建了一个半径为10px的圆。

将方形框的圆角设置为 50%，以获得圆形。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>圆角百分比表示</title>    <style>      .box {        height: 100px;        width: 100px;        border: 1px solid red;        border-radius: 50%;      }</style>  </head>  <body>    <div class="box"></div>  </body></html>