今天在写网页的时候遇到了两个问题,
一个是CSS怎样实现把边框变成圆角的
效果,另
一个是怎么让字体在居中的情况下也能够垂直居中。下面我将会针对这两个问题进行一一解答。
首先是CSS如何让边框变成圆角。我们可以使用border-radius这个
属性来实现。具体
代码如下:
.Box {
border-radius: 10px;
}
以上
代码意思是给class为
Box的元素设置
一个圆角半径为10px的圆角
效果。其中border-radius中的10px可以自由更改,以达到你想要的
效果。
接下来是第二个问题,怎样让字体在水平居中的同时也能够垂直居中。这个问题的
解决方法可以比较简单,我们可以使用CSS的flex
Box布局来实现。具体
代码如下:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container p {
text-align: center;
}
以上
代码中,我们给容器设置了
一个flex布局,让p
标签中的
内容在水平居中的同时也保持了垂直居中的
效果。其中justify-content: center是让元素水平居中,align-items: center是让元素垂直居中。
文章至此结束,相信经过这篇
文章的介绍,大家也能够轻松的实现CSS的圆角
效果和字体的水平垂直居中了。