css小技巧

宽高相等的图片

• 效果图
  

• html代码

<div class="img-wrap"
        <div class="img-container">
            <img src="img/timg.jpg">
        </div>
    </div>

• css代码

    .img-wrap{
        width: 100%; /* 这里设置占屏幕宽度百分比 */
        margin: 0 auto; 
    }
    
    /* 创建一个正方形容器 */
    .img-container{
        width: 100%;
        height: 0px;
        padding-bottom: 100%;
        overflow:hidden;
        margin: 0;
        position:relative;
    }

    /* 采用绝对定位 */
    .img-wrap img{
        position:absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        object-fit: cover;
    }

消息框角标

-效果

• html代码

	<div class="tip">
		&nbsp;消息
	</div>

• css代码

.tip {
			margin: 100px auto;
			padding: 10px;
			width: 200px;
			background: #ccc;
			border-radius: 5px;
			position:relative;
		}
		.tip:after {
			content:"";
			display: block;
			width:0px;
			height:0px;
			border:10px solid transparent;
			border-top-color: #ccc;
			position:absolute;
			bottom:-20px;
			left:10%;
		}

css三角形

• 效果
  

• 纯css的三角形

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent blue;
}

radio 样式修改

• 效果图
  
• css代码

/**
* 单选框自定义样式
**/
input[type=radio]{
    /*去除浏览器默认样式*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*自定义样式*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    border: 1px solid #FFC34A;
    outline: none;
    cursor: pointer;
    /*设置为圆形，看起来是个单选框*/
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #FFC34A;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    /*增加一些动画*/
    /* -webkit-transition : all ease-in-out 300ms;
    -moz-transition : all ease-in-out 300ms;
    transition : all ease-in-out 300ms; */
}
input[type=radio]:checked:after{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

• 项目开发请联系