【前端】百度页面的代码实现（起点闭关计划）

最新推荐文章于 2024-09-29 11:08:49 发布

我叫王不见

最新推荐文章于 2024-09-29 11:08:49 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：前端百度 elementui css

本文链接：https://blog.csdn.net/weixin_48680173/article/details/122970880

版权

本文介绍了如何使用CSS实现类似百度页面的边框圆角效果，通过设置`border-radius`属性，例如`border-radius: 10px 0px 0px 10px;`，来指定不同角落的圆角大小，以此达到预期的设计效果。

摘要由CSDN通过智能技术生成

效果图

关键代码：

圆角边框的实现

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

四个位子依次是，左上，右上，右下，左下，具体的数值可以根据百度源代码来实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			a{
				text-decoration: none;
				color: #222;
				font: 13px/23px Arial,sans-serif;
			}
			#btn-set{
				background-color: blue;
				color: #fff;
				border-radius: 5px;
			}
			#logo{
				text-align: center;
			}
			#search-text{
				width: 600px;
				height: 30px;
				border-radius: 10px 0px 0px 10px;
			}
			#search-btn{
				width: 100px;
				height: 36px;
				background-color: #4e6ef2;
				color: #fff;
				font-size: 18px;
				border-radius: 0px 10px 10px 0px;
			}
		</st