How to set border style in uniapp

Uniapp is an open source cross-platform mobile development framework that can help developers quickly design and implement applications. In development, setting borders is a very important task, which can effectively improve the aesthetics and user experience of the program.

This article will use the Uniapp framework to introduce how to set borders to make your mobile application more beautiful and textured.

1. Basic settings

You can use the CSS border style to set the border. Commonly used parameters include: width, line type, color, etc. The specific usage is as follows:

border: [width] [line-style] [color];

The most commonly used parameters include width and color. For example, the following code can set a blue border with a width of 1 pixel:

border: 1px solid blue;

where solid means solid Line, other types include dashed (dashed line), dotted (dotted line), etc.

2. Rounded corner settings

In addition to basic border settings, Uniapp also supports setting rounded corners, which is implemented through the border-radius parameter in CSS.

Border-radius is used as follows:

border-radius: [x-radius] [y-radius];

The unit for specifying the rounded corner size can be pixels (px), percentage (%), etc. Here are some examples:

border-radius: 10px 20px; /* 指定水平方向为10px，垂直方向为20px的圆角 */
border-radius: 50%; /* 指定50%的圆角半径 */
border-radius: 50px; /* 指定50像素的圆角半径 */

3. Shadow settings

The shadow effect is an important part of helping the program to add a sense of hierarchy. In Uniapp development, a shadow effect can be easily achieved through the box-shadow attribute. The specific usage is as follows:

box-shadow: [h-shadow] [v-shadow] [blur] [spread] [color] [inset];

where h-shadow represents the horizontal offset of the shadow, and v-shadow represents the vertical offset of the shadow. Amount, blur represents blur radius, spread represents diffusion radius. color represents the color of the shadow, and inset represents the inner shadow.

For example, the following code can achieve a black 5-pixel offset rounded outer shadow effect:

box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);

4. Example Application

Let’s use a specific case to illustrate Demonstrates the implementation of Uniapp's border setting:

<template>
  <view>
    <view></view>
  </view>
</template>
<style>
.container{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.box{
  width:200px;
  height:200px;
  background-color:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 10px 20px rgba(0, 0, 0, 0.5);
}
</style>

This example defines a container and a small box container. Among them, the box small container is a square of 200px*200px size. Its color is white, the border is 1 pixel gray, the corner circle is 10 pixels, and a layer of black is also implemented, with an offset of 10 pixels and a diffusion radius. It is an outer shadow effect of 20 pixels, as shown below:

#In the above example, you can also try to set more parameters to adjust the style effect according to actual needs.

Summary:

Setting borders is a commonly used UI design technique in Uniapp, which can help programmers enhance user experience and visual effects. This article focuses on how to use CSS to set borders, rounded corners and shadow effects in Uniapp. I hope it will be helpful to Uniapp developers.

The above is the detailed content of How to set border style in uniapp. For more information, please follow other related articles on the PHP Chinese website!