찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

奋力向前
奋力向前원래의
2021-08-18 17:30:344537검색

이전 글 "html: 웹 페이지에서 입력 상자 효과를 얻는 방법(상세 코드 설명)"에서는 html을 사용하여 입력 상자 효과를 얻는 방법을 소개했습니다. 다음 글에서는 CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 소개합니다.

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

html을 사용하여 웹페이지에 둥근 버튼을 만드는 방법

1. 새 html 파일을 만듭니다. 먼저 body에 a를 입력합니다. > 태그를 지정하고 빈 링크를 삽입하세요. <a href="#"></a> 버튼 를 누른 다음 제목. html文件，首先body中先输入一个a标签，并插入一个空链接。<a href="#"></a>按钮，然后在title中插入引入内嵌样式的代码<style type="text/css"></style>。

代码示例

<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style type="text/css">
 
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>
</html>

代码效果

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

2、将a标签添加一个css样式，命名为【btn-style】，并定义按钮的宽、高、背景色、字体颜色、去掉下划线。添加disply:block，不然定义按钮的宽高都不会生效。然后在a标签中引入btn-style

코드 샘플

<style type="text/css">
           .btn-style{
                width: 150px;
                height: 50px;
                color: #f8ff00;
                background:#010dfb;
                text-decoration: none;
                display: block;
           }
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>

코드 효과

WeChat 스크린샷_20210818165509.jpg

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).2. a 태그에 CSS 스타일을 추가하고 이름을 [btn-style]로 지정하고 너비와 너비를 정의합니다. 버튼을 클릭하세요. 높이, 배경색, 글꼴 색상, 밑줄 제거. disply:block을 추가하세요. 그렇지 않으면 정의된 버튼의 너비와 높이가 적용되지 않습니다. 그런 다음 a 태그에 btn-style 스타일을 도입하세요.

코드 예시

line-height: 50px;
text-align: center;
font-size:"微软雅黑"；

코드 효과

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).3 계속해서 스타일을 추가하고 글꼴 가로 가운데 맞춤, 세로 가운데 맞춤, 글꼴 및 버튼 글꼴 크기를 정의합니다.

코드 예시

border-radius: 100px;

코드 효과

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

4. 버튼의 네 모서리를 둥글게 설정하여 버튼처럼 보이게 합니다. 

border-radius: 10px

코드 효과


효과가 완료되었습니다. 알겠습니다. CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

border-radius가 단지 둥근 모서리라고 생각하시나요? 실제로 테두리가 위치한 원의 반경을 의미하지는 않습니다. border-radius 속성 매개변수에 대해 자세히 설명하겠습니다.

속성 값 단위는 em, px, 백분율 등을 사용할 수 있습니다.

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명). 사용해 보고 테두리 반경을 100px에서 10px로 변경할 수 있습니다.

border-radius: 10px 20px 0px 30px;

코드 효과

CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

"각 둥근 모서리의 레벨 요소 "반경"과 "수직 반경"은 모두 10px로 설정됩니다.

🎜border-radius는 1~4개의 값을 동시에 설정할 수 있습니다. 4개의 값을 설정하면 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리에 해당합니다. 모서리. 🎜rrreee🎜코드 효과🎜🎜🎜🎜🎜추천 학습: 🎜Html 비디오 튜토리얼🎜🎜

위 내용은 CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html href border
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)다음 기사：HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)

관련 기사

더보기